Submitted 24 days ago

Mobile-first product preview card

Eddie•140

@WeatherheadOnline

A solution to the Product preview card component challenge

Preview Code

Solution retrospective

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

I'm proud of contributing to accessibility by putting the <h1> element (the product's name) first in the HTML file, followed by the category ("perfume"). The two elements appear in the reverse order when rendered on the page, to match the design file; this was achieved by wrapping the two elements in a container div, and setting the container div to display:flex; flex-direction:column-reverse.

I'm also proud of being detail-oriented and noticing that the provided shopping-cart image was different than the one shown in the design file. I exported a replacement image from the design file, as an .svg file.

In this challenge, I used flexbox to vertically center-align the two price tags; next time I see a problem like this I'd like to do more research to try to find a different approach, because I rely on flexbox so much already.

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

The main challenge I came across was getting border-radius to work with background-image.

I had chosen to use background-image to insert the product image, so that I could use a media query to serve either the desktop or mobile version of the image. (Another option could have been to add an <img> element, and use a script to listen for device type and swap out the src attribute of the <img> as needed. However, I didn't want to risk content-jumping side effects.)

The problem I found was that when I added border-radius to the product card, it worked fine on the corners adjacent to text, but the corners of the image were not getting rounded.

I asked a search engine, and found this page: https://floriankempenich.com/background-image-with-rounded-corners. It recommended applying container {overflow:hidden}. I tried this and it solved the problem for me.

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

I'd love to hear any feedback. In particular, I'm interested in: (1) how to vertically center text without using flexbox; (2) recommendations for how to include the image without using background-image, but while still being able to serve either the desktop or the mobile version of the image, as appropriate.

Code

Please log in to post a comment

Community feedback

beowulf1958•1,890
@beowulf1958
Posted 24 days ago
Congratulations on completing this challenge. Your page looks awesome and is responsive.

I love that you included project notes! Gives an insight into your thinking. Very brave. Your markup is clean and clear and well-organized. I love how you took the text-presets from the figma files to do your styling! That makes it clear which elements are similar, and which have differences. Now my comments:
1. What is wrong with flexbox? Flexbox is brilliant, and a great way to center text and get the spacing correct using gap.
2. I think the code you are looking for is the <picture> tag with the <source> attribute. It looks like this:
```
  <div class="product-image" >
    <picture >
      <source media="(max-width: 400px)" srcset="images/image-product-mobile.jpg">
      <img src="images/image-product-desktop.jpg" alt="A bottle of Gabrielle Essence perfume">
    </picture>
  </div>
```
This tells the browser to use the mobile image until 400px, then use the desktop image thereafter. No JS needed! This article explains it all.

Hope this helps. Keep on coding!
Marked as helpful

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