Flex Breakpoints & Overriding Breakpoints Troubleshooting
I am not 100% sure how to explain this or if this is an isolated issue due to my limited understanding of the Flex ecosystem. I have taken all Flex courses and am ready to make this switch away from classic editor. However, the one thing I'm not wrapping my head around is optimizing for the different breakpoints.
In the classic editor, you were required to duplicate and hide sections for the different devices. This was not an ideal process, but we gained efficiencies after building quite a few sites.
Do you have to do a similar process in Flex?
My understanding was Flex removed this need and was able to edit per breakpoint. However, when I center align text at the column level for mobile, it trickles upward to other breakpoints. If I resize the text on mobile, it trickles upwards, corrupting the other versions.
I have read the article multiple times but still do not understand how to ensure my design works well on all breakpoints.
Does anyone have a simple explanation that can help me better understand this or solve my issue?
Comments
-
Hi @Zhuff96 - great question. I just reached out to a member of my team to help shed some more light here - will follow up soon!
0 -
@Zhuff96 you simply switch between each view/breakpoint while in flex mode to modify the look or response for each device.
0 -
Hey Thomas, thanks for taking the time to address my concern. I initially thought the same, but it's not functioning that way on my end.
0 -
@Zhuff96 you may need to send a link to a screen recording or upload a video of what you are experiencing so we can better understand and provide the proper assistance.
0 -
@Zhuff96 Flex is definitely the way to go. It does have its pros and cons, but in my opinion the pros outweigh the cons.
When it comes to changing text across the different breakpoints, you must set the Theme in each breakpoint. For example if I want my Mobile paragraph text to be size 14 then I need to go into the Mobile breakpoint, then click on Theme > Text and change my paragraph text font size to 14.
As far as text alignment goes it's a mixed bag. Sometimes my alignments in Mobile stay in Mobile and sometimes it trickles up to Desktop. Sometimes if I change it in mobile and affects the other 2 breakpoints, I am able to then change it in the other 2 without affecting mobile. However, it is completely random so I'm not sure if it's working as intended here. I recommend keeping paragraph text left aligned since centered paragraph text has been proven to be difficult to read, especially for those affected by Dyslexia, and even more so in mobile.
Hope this helps!
0 -
@Zhuff96 the main issue here is that styling elements on a web page is, by its very nature, a complex beast. Flex actually makes things simpler, but that doesn't mean it'll be simple: there's still quite a bit of planning and care required, in order to understand what goes on in your page, and manage it.
Let's start with some basic concepts. A Flex Container — whether it's a section, a column, or a box — is a special 'box' that aligns its children elements either horizontally (in a row/line) or vertically (in a column). When the viewport becomes small — i.e., on mobile — all flex containers default to aligning their children vertically, because it's assumed we'll not have enough space to align things horizontally. And this is the first place where flex already starts to be useful: if you have a 2-column layout on your desktop device, you don't have to change anything to make it a single-column layout in mobile. Your two columns will automatically pile on top of each other on mobile (and you can even reverse their order, if you need to).
The next concept you need to understand, is that the children inside the flex container may not take up ALL of its space. You may have, for example, 3 small pictures inside a flex column. So, how should the flex container space and align these children? That's the second time flex comes in handy: instead of having to manually fidget with margins and spacers, you can simply tell the flex container "align all the children in the centre with 12px of space between them". That's what THESE controls, which you will see in the Design Editor of flex containers, are for:
In this example above, we have a flex column that is set to align its children vertically, in the middle and to the left, and to put 24px of space between the children.
So far so good? Now, we will run into a problem when we don't want ALL the children to have the same alignment settings. For example: let's say that in that column I have 3 images, and I want them all to be centred, except for the one in the middle. I want that one to stand out, so I want it to be right-aligned. In order to allow you to do that, Duda gives us separate alignment controls for every widget we place inside a flex container. In the case of an image widget, for example, this is what the alignment control looks like:
In the example above, I used the widget's alignment control to override the default 'centre alignment' of the flex column, and set my image to 'align right'.
It is important to note that a widget's alignment CAN be set for each device independently: you can have it aligning left on desktop, and centred on mobile, for example. As a matter of fact, that is the 'default' alignment that Duda sets for new flex columns: its children will be left-aligned by default on larger viewports, and centred on mobile devices.
Now, how does all that work with text?
By default, in Duda when you apply a flex alignment to a container (and its children), that alignment will also apply to the text. So, if you have a text box with normal body text that is left-aligned on desktop, when you switch to mobile that text will be centred, by default. Changing a text widget's alignment to 'right', for example, will make its text right-aligned. There are 2 exceptions to this rule:
- Headings are left-aligned by default, even on mobile. You will have to explicitly set the WIDGET ALIGNMENT of your heading to 'centred' or 'right' if you want to change it on mobile.
- Content changes apply to all viewport sizes. Another way to change text alignment is by clicking in the text widget, placing your cursor in the text/selecting the text, and then changing the alignment of the text in the edit toolbar. Duda considers this to be a content change, and all content changes apply to ALL viewport sizes. So if you just want to change the alignment on a single viewport, use the WIDGET ALIGNMENT controls instead.
By using a combination of Design Editor settings, Widget Alignment settings, and content settings, you should be able to use Flex to greatly minimise the amount of tweaking you need to do, in order to achieve the alignment you need in all screen sizes.
In the spirit of full disclosure: I'm relatively new to Duda, so the information above may not be 100% accurate — but it works for me, and I hope it might help you, too! :)
0 -
@visioncraft Wow! What an investment in answering my question. I appreciate this a ton! I will likely read this 100 times to fully understand but it made perfect sense after the first 2 reads.
1 -
Hi @Zhuff96,
This is Dorit from Duda's support team,
let me explain how inheritance works on Flex:
As long as you do all the editing from the Main Breakpoint, it will inherit to desktop + tablet and mobile (mobile has some differences, depending on what you are editing exactly, for example, height is determined by content on Mobile so it's not the same height as desktop, this is on purpose).
However, once you have set a value from tablet/mobile it will not inherit to desktop as you have actually overridden the settings. That’s intentional, for example, you might want to change button size to be wider and higher on mobile and small on desktop - so "we assume" you don't want to have it the same for all devices, therefore you cannot edit it again from the Main Breakpoint after it was overridden.
If you have overridden the main breakpoint, you will not be able to use it for all breakpoints again, since it is overridden.
Settings you can override per screen size are “style” such as alignment, size, and spacing (there are device indications next for each component). Basically, anything that you would want to adjust its style to another device.
Content is always the same for all breakpoints, so if you delete an element, for example, it will be deleted on all breakpoints.
Just in case, this is the relevant article that explains this: DudaFlex Breakpoints.As for Text changes, the Text editor is still not a responsive widget, so it works the same on a Classic row or a Flex section, meaning Tablet inherits from Desktop, and Mobile will be smaller than the desktop but will change its size once you edit on Dekstop, however, if you edit Mobile text it will not affect desktop+Tablet. Feel free to upvote this feature request on our Idea Board here:
I hope this makes sense.
Dorit,
Sr. Technical Support Engineer at Duda
1
