I’ve set up a (very) simple landing page for a project I’m developing. It looks okay in LG view, but I start losing the layout in MD (squished logo) and in XS things get scrambled.
My issue is that when I change something in sizes smaller than LG, it goes back up the chain and changes the LG as well. I thought changes went down the chain, not up.
What have I set incorrectly or am doing wrong?
Thanks
Blocs uses the Bootstrap framework which is mobile first. So styles go from the smaller breakpoints up.
If you set something on a smaller breakpoint but don’t have any style set for the larger one it will inherit the smaller one.
Eg. If you wanted to set a 20px padding on a bloc across all breakpoints. You can just set it on the XS and all breakpoints will have a 20px padding.
Hope that helps.
I guess I had everything upside down then.
If I’m understanding correctly, I should start with an XS first (smartphone) and work my way up to LG. Correct?
I usually start with the LG breakpoint. But as I’m working I am taking into consideration mobile. If it’s a style that’s apply through all of them. I’ll set it on the XS.