Need some tips on working with responsive web design

Hi everyone
newbie here, I have been working on my product landing page, I think I messed up a little bit by making it complicated . I really need your help to make it responsive
here is the link
A Pen by Aditya Altada (codepen.io)

We cannot see your page full view. Please verify your email address with codepen.

Some tips;

  • Do not use fixed dimensions on elements, use max-width/height and relative units like %, em, rem and vw to keep everything responsive.
  • Start by styling for a narrow view port first. Narrow your browser as far as it will go and style the page so it looks good at that narrow width. Then gradually widen your browser and use CSS media query break points to adjust the style for wider view ports if needed.
  • This may help too. Add this, box-sizing: border-box; to a universal selector to see how you have your elements laid out.
2 Likes

Don’t use positioning unless you have to. You have positioned elements absolutely that in no way need to be positioned. Absolutely positioned elements are taken out of the normal document flow and it breaks the natural responsiveness of pages.

Use padding, margin, and flexbox/grid gap to create space. Use flexbox/grid for the layout using their space distributing methods as appropriate (justify/align).

1 Like