Respponsive product preview card using mobile-first approach

Community feedback

• 

  P

  Steven Stroud•11,910

  @StroudyPosted 2 months ago

  Amazing job with this! You’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…

  • It would be better to add the <img> to your HTML and then style it with something like this,

  .product__image {
      object-fit: cover;
      width: 100%;
      height: 100%;
      aspect-ratio: 2 / 3;
    }
  

  • Then set the width and height for the <img> it helps the page load faster and prevents content from jumping around as the image loads. This is good for performance and improves user experience. However, if your image needs to keep a consistent shape (aspect ratio) across different screen sizes, it's better to use the CSS aspect-ratio property instead.

  • This does not matter that much at this stage but something to be mindful of for SEO(Search Engine Optimisation), <meta> description tag missing.

  • Using position: absolute is not always best practice because it removes elements from the normal document flow, making layouts harder to manage and potentially causing overlap or misalignment on different screen sizes. Instead, use flexible layout techniques like CSS Grid or Flexbox for more responsive and maintainable designs.

  You have done so many things correctly with this solution, Keep building on your knowledge, and remember, every step forward is progress. You’re on the right track, and you’re doing great. Have an awesome day and happy coding! 😊

  0

  ---

  

  Sagi•120

  @ratsagiPosted 2 months ago

  @Stroudy, I figured out that it was because of the object-fit: property so I decided to use picture instead of background-image.

  1

  

  P

  Steven Stroud•11,910

  @StroudyPosted 2 months ago

  @ratsagi, Good stuff, Its good to see you figuring it out and not just copying and pasting, I hope I pointed you some where in the right direction and was helpful. You’re doing an amazing job, so keep up the hard work. Remember, every line of code is a step closer to mastery. Stay motivated and keep coding! 🎉

  0
• 

  Svitlana Suslenkova•5,360

  @SvitlanaSuslenkovaPosted 2 months ago

  Please, try this code, I think, it could help against the scroll.

  *, :after, :before, body { margin: 0; padding: 0;}

  But, please, write it in the beginnig of your style.css

  Hope you found this comment helpful :)

  0

  ---

  

  Sagi•120

  @ratsagiPosted 2 months ago

  @SvitlanaSuslenkova, Unfortunately it didn't help. I use modern css reset of Josh Comeau so this line of code must be already there.

  0

  

  Svitlana Suslenkova•5,360

  @SvitlanaSuslenkovaPosted 2 months ago

  @ratsagi hm, I don't see padding: 0 in body styles, but ok, I won't argue. You can just move you @media point to 31rem

  0