We only took two weeks off, but it feels much longer since the last Dev Diary. Anyway, we’re back to our usual schedule now, and you can expect at least one video update per week.
Today’s video is a bit of a catch-up on the UI and template changes we’re in the process of making. I also go back to basics and build a big banner with an overlaid menu – hopefully, anyone using Elements will find a little bit of useful information in this episode.
One thing I noticed in your demo file is that it doesn’t really work on mobile (the text goes off screen).
I tried to fix it by changing the font size for the mobile breakpoint (4xl instead of 7xl) by breaking the ‘link’ and adding a breakpoint (the blue dot), but any changes I made were applied across all breakpoints, meaning I could never just affect font size changes one device breakpoint (mobile).
This is illustrated in the following screen shots. The first one shows the text size set to 4xl in the mobile breakpoint.
The next screenshot shows the next breakpoint up (mobile landscape) with the text size parameter set to 7xl using the broken link and breakpoint 'dot. The text displayed doesn’t actually reflect a 7xl size.
Thanks @dan! That solved it, although the link and dot are still a bit confusing as there’s no indication of what they relate to — just something you have to commit to memory.
One thing that I’m finding very counter-intuitive using the breakpoint icons is that even if you select the desktop breakpoint, if your screen size/viewport is smaller than the desktop breakpoint any changes won’t be visible in the viewport.
For instance, I had my window sized so that the viewport was sized to the ‘md’ breakpoint and then clicked the ‘lg’ breakpoint icon to set a 7xl size for the text. While the icon at the top indicated the ‘lg’ breakpoint the viewport only reflected the ‘md’ settings.
This makes sense in that the viewport is still on sized for the ‘md’ breakpoint, but it confuses the WYSIWYG aspect in that the changes aren’t actually reflected in the viewport as you make them.
Good suggestion, have added it to the list to implement. In the meantime you can right-click in the node browser and select Duplicate.
You can currently do this in the main editor, select the components you want then, command-C and Command-V on the page you want them (just make sure the editor has focus on both pages).
I feel the same way — The next beta update with our big UI change will allow for this
Open Camping Project in Elements
