Website - resizing

Website - resizing
0

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?

https://miochung7.github.io/Course---Landing-Page/

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