Responsive element page using Media Query and Mobile First Concept.

Community feedback

• 

  Krzysztof Rozbicki•370

  @KrzysztofRozbickiPosted almost 2 years ago

  Hey. I am sure you noticed that your mobile design is quite off. I will try to give you some tips how to fix that:

  • you have a small gap between the image and the section - it's because the <img> is an inline element by default you can set the : display: block; to the <img> element to solve this gap issue.
  • you have put width: 40ch in the section which made it look bizzare on my browser and off the design. I think you shouldn`t put the width at all in this element, just delete it and it ill be fine - section will get the width of its parent - the main.
  • If you want to get small spaces on the sides / up/down of your whole content (so it doesn`t stretch automatically to the 100% of the screen) you can either put like 1rem padding on the body, or use the min() function on the width / height of your main cointainer.

  Overall good job! Keep it up :)

  Marked as helpful

  1
• 

  Welder Ressutti•30

  @welderessuttiPosted almost 2 years ago

  Hey, how's it going?

  I took your tips and applied them to the challenge.

  The "display: block" in <img> didn't work, the space between the image and the section was still there, so I tried using "display: flex" and it worked. The other changes were pretty good.

  I am very grateful for your attention and tips. Cheers!

  1