Landing page project , feedback appreciated :)

Yet again … i gave up on adding media queries , i find em very confusing :thinking:

what should i improve and focus on next ?

https://codepen.io/Abdou_dz_23/full/LvmKvy

@Simply_abdou focus on what you find difficult is what I reccomend.

It is easier to build your webpage small and then expand outwards. For example, keep the width of the browser set to 300px while you are designing it. Then you slowly expand the browser outwards to see where the design breaks. That is the time to add you first media query.
Example: If you see a problem at 400px body width you do this:

Your default font size for h1 might be font-size: 1.5rem so your first media query could be this:


h1 { font-size: 1.5rem } /* default font size */

@media (min-width: 400px) {
  h1 {
    font-size: 2rem;
  }
}

@media (min-width: 600px) {
  h1 {
    font-size: 3rem;
  }
}

That means that the font size would increase for anything over the body width of 400px wide to 2rem. Expanding the browser wider than 600px would increase the font to 3rem.

1 Like