Skip to content
Submitted about 2 months ago

product preview card

P
JairRaid•450
@JairRaid
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm proud of having completed the site in a responsive manner.

What challenges did you encounter, and how did you overcome them?

i had some difficulties with the desktop worklow because i first use grid, and the image overflowed when i enlarged the window.

So i decided to use flex, and the problem is resolved.

What specific areas of your project would you like help with?

How to solve the image overflow issue using CSS grid?

Community feedback

  • Marzia Jalili•3,920
    @MarziaJaliliPosted about 2 months ago

    As @budijiie said the solution is spot on!

    One thing though:

    Instead of change the image using JS use the <picture> element.

    • The picture element is very handy when it comes to multiple images for different screen sizes. It gives you the ability to set different media attributes which can declare the screen size for each source element nested inside.

    You can take the code below as an example:

    <picture>
  <source 
    srcset="(path of mobile image)"  media="(max-width: 30em)"
  />
  <source
    srcset="(path of desktop image)"  media="(min-width: 31em)"
  />
  <img src="(path of the image)" alt="image"/>
</picture>
    • The src attribute in the img will be the fallback source of the image if the other sources are not found.

    You can change the media attribute to some other number according to the screen, so it will also prevent overflowing.

    Keep up the grind 💪

    Marked as helpful
    2
  • budijiie•100
    @budijiiePosted about 2 months ago

    Great work man. The solution was on point

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord