Product Component Preview card with HTML and CSS

Community feedback

• 

  Nikola•220

  @porumbachanovPosted 6 months ago

  Hi, in response to your question you asked on my solution, I'm not sure I can give you proper feedback, however I can tell you what I did.

  Basically what I did was have one parent div in which I have two children divs, one for the image and one for the text content. I set the container to 45rem (for desktop) and the height to 100%, that way I let the content inside the parent container dictate the height. And of course I'm using flexbox for the layout. So basically for the whole size thing, I just have a fixed width for desktop and mobile and the height is dictated by the content, so the margins, font sizes, etc all play a part in the height.

  Dunno if I made sense but hope this helps.

  P.S. You can style the spacing in the "perfume" text without using <span> by using letter-spacing: :)

  Marked as helpful

  1

  ---

  

  induwara-thisarindu•190

  @induwara-thisarinduPosted 6 months ago

  @Vrondir Thank you very much for taking your time to reply and it did help me

  1
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 6 months ago

  Hello there!

  Congrats on completing the challenge! ✅

  Your project looks great!

  I have a suggestion about your code that might interest you:

  📌 You can use the <picture> tag when you have different versions of the same image.

  Using the <picture> tag will help load the correct image to the user's device, saving bandwidth and improving performance.

  Example:

  <picture>
      <source media="(min-width: 768px)" srcset="{desktop image path here}">
      <img src="{mobile image path here}" alt="{alternative text here}">
  </picture>
  

  I hope this helps!

  Other than that, excellent work!

  Marked as helpful

  1

  ---

  

  induwara-thisarindu•190

  @induwara-thisarinduPosted 6 months ago

  @danielmrz-dev Thank you very much 😊

  0