Use of breakpoints with intrinsic/fluid design
Hello,
Looking for ideas or feedback on breakpoints.
I like the simplification of fluid design and using clamp for text/margin/padding fluid design etc....
My layout is simple (service-based website, not e-commerce).
I have no need for more than three columns per row on large viewports.
MY QUESTION IS: is there a best practice size for a mobile breakpoint to stack the row into a column and/or is setting the column to wrap and a min-width on the column better?
MY MAIN GOAL IS: to simplify the structure of my website
If it matters I am using elementor pro.
Thanks,
Preston
3 Replies
Often when I'm narrowing a page, I find changing
flex-direction from row to column useful.go into dev tools, switch to responsive mode, and scale your page width up/down until something breaks. Then you can see where your content breaks and fix it accordingly
you could always use flex wrap, otherwise theres no hard and fast rule, you just have to see where your design breaks. i find i use 600px often for breakpoints. theres also this approach with flexbox that kevin has talked about, the Holy Grail i believe the original dev called it. https://youtu.be/LEkFckg7sfw?si=4eQi7BVmtYKIx15K
Kevin Powell
YouTube
Use this instead of media queries or container queries
Media queries are a bit limited in how they work, and while container queries go a really long way in solving a lot of those limitations, there are intrinsic patterns that we can follow that allow us to do things that neither one of them can do.
The setup is a bit strange and can look complex, but, in my opinion, it's also 100% worth it!
š Lin...