Device Responsiveness!

I seem to have the same problem over and over again.Iv finished my product landing page but im struggling to make it responsive to devices. Im kindly seeking help, heres the link: https://codepen.io/Takudzwa95/full/RzXzPe.

Thank you.

  1. Your media query syntax is incorrect
    You have:
    @media and only screen(max-width:800px)
    Should be:
    @media only screen and (max-width:800px).

  2. You can add flex-wrap: wrap to the two image sections to make the images wrap.

  3. Don’t use margin to place elements in the center by pushing them some fixed amount of pixels. It’s OK to push the element away from the container by some amount or to use auto for centering. You already know how to do centering using flexbox so use that.

  4. You need to let the images scale down.

Here is a very quick and dirty responsive version of the page. There are still plenty of things missing like a proper responsive video and making the links land correctly. The nav responsiveness is also pretty simple and so on.

You can fork it and compare the CSS to see what and where I have made changes. I have tried to just comment out the CSS but I may have deleted something as well without really realizing it. Just let me know when you have forked it and I will delete my version.

https://codepen.io/lasjorg/pen/Eqaqvb deleted

1 Like

Thank you very much. You have been really helpful.

No problem, let me know if you have forked or are done with my version so I can delete it.

i have forked it, thank you.