CSS Responsive design

Community feedback

• 

  P

  Ortaly•970

  @ortalyartsPosted 8 months ago

  Hello @cloudpc7, Good job so far!

  Image issue - the perfume image is distorted. For this are two reasons

  1. You used mobile image for desktop screen. For this project we were provided with two images for desktop and for mobile designs. To handle this you can use <picture> tag. It allows you to make madia queries. Just example:

  <picture>
  	<source srcset=”images/40under40_full.jpg”
  		media=”(min-width: 40em)”>
  	<source srcset=”images/40under40_medium.jpg”
  		media=”(min-width: 20em)”>
  <img src=”images/40under40_small.jpg” alt=””>
  </picture>
  

  Read more here

  2. It is better to set a max-width for an image container, while for the image itself set max-width: 100%; height: auto; . This makes your image responsive and preserves its ratio.

  For designs like this I prefer to use grid. Try setting the main.container to display: grid; grid-template-columns: 1fr 1fr; for desktop. This will provide you two equal columns for image and for div.content.

  As for your question about the @media queries: You just check when your design starts to be too squeezed on narrow screens and set a media query for that point. For example in this project you could set a starting point for desktop design like this: @media screen and (min-width:40rem) { ... } and insert the grid-template-columns: 1fr 1fr for your main.container like explained above.

  I hope you find this helpful! Cheers 😊

  Marked as helpful

  0