Responsive landing page with only html and css

Community feedback

• 

  Adriano•38,270

  @AdrianoEscarabotePosted about 2 years ago

  Hi Lea! How are you?

  I really liked the design of the project, but I have some tips that I think you will like.

  I noticed that you used flex-box in this challenge, the best would be to use grid, because we have more control of the columns.

  I made some changes to show you and I would like you to do it too:

  I changed the image size:

  .card img {
      height: 460px;
      width: 300px;
  }
  

  I made the change to the grid:

  .card {
      display: grid;
      grid-template-columns: repeat(2, 300px);
  }
  

  To have a code with better accessibility we will work with the picture tag in the html, to change the mobile image. link to read more about the tag --> click here

  I removed the two img tags, and added:

  <picture>
    <source media="(max-width:650px)" srcset="images/image-product-mobile.jpg" class="mobile">
    <img src="images/image-product-desktop.jpg" alt="Flowers" class="desktop">
  </picture>
  

  Now to make the switch from the mobile version, we will use a media query:

  @media (max-width: 650px) {
      .card {
          grid-template-columns: repeat(1, 80%);
      }
  }
  

  Remember to prioritize relative measurement units.

  The rest is really good!!

  Hope this helps! 👍

  Marked as helpful

  1

  ---

  

  Lea•160

  @HatchinoPosted about 2 years ago

  @AdrianoEscarabote Thank you for taking the time to write to me. I applied your advice by adding the picture tag. But with the mobile class I can't change the style of the image (change the size and the border).

  0