@finkenmann
Posted
you should check your breakpoints. A lot of mobile devices going down to 320px. At this point your layout is broken. Also the value for the desktop version. Make it bigger or use flexible values for your container and the child elements to be more flexible.
Marked as helpful
@gomes-leonardo
Posted
@finkenmann thank u Pierre. what breakpoints do you use? I don't know which breakpoints to use, should I always use a value? or can change according to the design
@finkenmann
Posted
@gomes-leonardo I don't use fixed breakpoints. The layout should always determine the correct breakpoint.
In this case there are already layouts for small screen and desktop. Now you have to decide yourself, up to which width your content still looks good. I had first decided for 700px, which was actually too high for me, because the mobile design became too wide and was no longer very nice, but the two-column did not fit from the content. But when I shrunk the left element, I was able to lower the breakpoint to 600px and I am happy with this solution.
Design mobile first in any case. So start with the mobile design. You don't have to go below 320px, because there are hardly any smaller devices. Then check in the browser, from which width the layout does not look good anymore and then look for a solution for the next size, or take the solution that is already designed. With mobile first you usually avoid that you have to reset code, because mobile usually gets along with little code. With wider layouts, the complexity is then increased by flex or grid, but usually builds on the code from the mobile design. I hope this helps.
A tricky point is usually the jump down to the single column mobile design. Because here from e.g. two-column content to single-column content always a very big jump takes place and images and cards look very big at the beginning. But you just have to find the right compromise.
Translated with www.DeepL.com/Translator (free version)
Marked as helpful
