Product preview with grid and flex

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @Emmiecodes, Congratulations on completing this challenge!

  Your solution its almost done and I’ve some tips to help you to improve it:

  Using <picture> you’ve more control over the elements and its better than using the product image as <img> or background-image. Look that for SEO and search engine reasons it isn't a better practice to import this product image with CSS since this will make it harder to the image. You can manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device (phone / computer) Here’s a guide about how to use picture: https://www.w3schools.com/tags/tag_picture.asp

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Emmiecodes•100

  @EmmiecodesPosted about 2 years ago

  @correlucas Thank you for your reply! It took a while before I could update the code because I was working on another challenge. Your suggestion solved my struggle with the sizing of the image and responsiveness at first, because when I view the page on my desktop, the image looks sized to fit the container but when I updated github, it looks very out of proportion again and covers alot of my page. Do you happen to know how this might come?

  Edit: problem solved, it just took a while for github to update the live :) Thank you once again for helping out with the responsiveness :)

  0
• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi @Emmiecodes,

  nice job on mobile

  Just check on desktop it's not displaying correctly. You can add the following media query as a starting point.

  @media (min-width: 768) {
  main {
      max-width: 800px;
      font-family: Montserrat;
  }
  
  .Product_Des {
      padding: 2rem;
  }
  
  .Product_Des h1 {
      font-size: 3rem;
  }
  }
  

  Hope this is helpful.

  Marked as helpful

  0

  ---

  

  Emmiecodes•100

  @EmmiecodesPosted about 2 years ago

  @hyrongennike Thank you for your feedback! I am glad to hear the mobile view looks good to you. I am still trying to get the desktop version properly sized. I tried using your code, but I do not really know how to go on from there to fix the sizing problem. Might try flex again instead but there are people who get it properly sized with grid too, and without using a background image in css.

  0

  

  George Mushore•310

  @tenderkingPosted about 2 years ago

  @Emmiecodes hi, try using max-width: on desktop

  Marked as helpful

  0

  

  Emmiecodes•100

  @EmmiecodesPosted about 2 years ago

  @tenderking Thank you so much! (Both of you) I do not know why the media query above didn't work, I also tried adding a max-height at the main after Hyrons comment but nothing happened but I think I did not save it before checking the first try.

  0

  

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  @Emmiecodes @media (min-width: 768) think you might be missing the px so it should be 768px.

  1

  

  Emmiecodes•100

  @EmmiecodesPosted about 2 years ago

  @hyrongennike I noticed that, very silly mistake but it worked in the end. Thanks a lot :) It helped me out with other challenges too.

  0