Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

perfume card-component

@angeliran

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View Challenge

Design Comparison

SolutionDesign

Report

0

Accessibility Issues

0

HTML Issues

View Report

Angel Iran’s questions for the community

I had problems with the image, any suggestion feel free to comment. ty

Community Feedback

Elaine 4,910

@elaineleung

Posted

Hi Angel Iran, good job putting this together! It looks like your image is slightly distorted, but no worries, that can be fixed with object-fit by adding object-fit: cover to your img element.

I see you using a breakpoint of 376px; the tricky thing is your component overflows off the screen until the breakpoint changes. Since the component is about 600px in desktop view, I suggest a breakpoint slightly higher than that (e.g., 620px). The other problem I see is that, you only have the mobile image in the HTML. You can use the picture element in your HTML by adding these lines around your <img>:

<picture>
    <source srcset="./images/image-product-desktop.jpg" media="(min-width: 620px)">
    <img src="./images/image-product-mobile.jpg" alt="">
 </picture>

Lastly, to center everything, use display:grid on your body selector, like this:

body {
  display: grid;
  place-content: center;
  min-height: 100vh;
}

Well done!

Marked as helpful

2


@angeliran

Posted

@elaineleung Thank you very much for your advice

1

P
David 2,080

@DavidMorgade

Posted

Hello Angel, congrats on finishing this challenge on FrontEndMentor!, here are a few tips that can help you for next projects!

1 - To center a simple component like this want there is an easy way with just a few lines of code, instead of giving your main any margin, give your body a heigth: 100vh and then a display: flex, flex-direction: column, justify-content: center (to center vertically) and align-items: center (for horizontal centering).

2 - For your image, the easies way to use two image for the same img tag and switching them depending on the size, is to use the <picture> tag and the source tag, you can wrap your img with this tag and depending on the device screen, display diferent images, for example:

<picture>
     <source media="(min-width:660px)" srcset="./images/image-product-desktop.jpg" >
     <img src="./images/image-product-mobile.jpg"  alt="Product picture 
</picture>

In this case, for 0 to 660px you will have the mobile version, and for 660px+ you will have the desktop version.

Hope my feedback helps you, good work and keep going!

Marked as helpful

2


@angeliran

Posted

@DavidMorgade Thank you very much for your advice

0

Ogiji Max 120

@MaxiTeddy

Posted

Thats not the image you should for the desktop view, check your folder and change the image

0

Please focus on giving high-quality, helpful feedback and answering any questions angeliran might have. Here are some key points to consider:

  • Does the solution include semantic HTML?
  • Is it accessible, and what improvements could be made?
  • Does the layout look good on a range of screen sizes?
  • Is the code well-structured, readable, and reusable?

You can read our community guidelines if you're unsure what to post.

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!