Hello,
I’ve made a landing website, however everytime I resize itthe browser the div boxes move too.
Any reason you know what is causing this?
Do you mean you want your landing page to be unresponsive? If so, why?
I would like it to be responsive. However if you try to re-size the browser you can see that the boxes on the landing page separates and creates white spaces in between.
Any thoughts on this at all?
@miochung7 try using css @media queries. Stack the DOM Elements on top of each other when the screen gets small enough.
You have to be careful with how you size images. Using background-size: cover or object-fit: cover can help.
Other than that I’d suggest using Flexbox and/or CSS Grid. You do not need to use floats, or much if any positioning, to make that layout. And, as suggested use media queries to switch the layout.
I made a version you can check out with three major breakpoints. I didn’t really plan to make it, it just sort of happened. Maybe there is something you can use.
https://codepen.io/lasjorg/full/vYYGypd