Submitted over 1 year ago

Product View Challenge | HTML & CSS

Melyssa Moya• 60

@dntfindmel

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Community feedback

Hassia Issah• 50,670

@Hassiai

Posted over 1 year ago

Replace<section class="perfume_card>with the main tag and <div class="attribution"> with the footer tag to fix the accessibility issues. for more on semantic html visit https://web.dev/learn/html/semantic-html/

To center a content on a page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

Give perfume_card a fixed width value. e.g .perfume_card{width: 600px;} . give the div a width of 50% and the img a width of 50%. this will remove the gap between them. There is no need to give .perfume_card justify-content: center.

You forgot to add a mobile query for the mobile design.

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Marked as helpful

Melyssa Moya• 60

@dntfindmel

Posted over 1 year ago

@Hassiai Thank you! I followed your tips and my site looks much better <3 Thank u fou helping me, is really important for someone that is learning.

Ambe Mbong-Nwi Nchang• 550

@Ambe-Mbong-Nwi

Posted over 1 year ago

Hello, your work looks great but I noticed the landmark errors. To remove these errors and also improve navigation by users, include the main section just after the body before you begin placing divs in it.

<body>
   <main class="perfume__card">
       <img>
       <div></div>
       <div></div>
  </main>
 <footer></footer>
</body>

Again, replace your last div element with a footer.

<footer class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">  Frontend Mentor</a>. 
  Coded by <a href="https://www.frontendmentor.io/profile/dntfindmel">  Melyssa Moya</a>.
 </footer>

Secondly, to ensure your page is always centralized, include the following:

body{
  margin: 0 auto;
}

Marked as helpful

Melyssa Moya• 60

@dntfindmel

Posted over 1 year ago

@Ambe-Mbong-Nwi Thank you! I followed your tips and my site looks much better <3 Is easy to forget some things when you still new to this hehe Thanks for helping me, is really important for who is learning for a short time.

Ambe Mbong-Nwi Nchang• 550

@Ambe-Mbong-Nwi

Posted over 1 year ago

@dntfindmel You're welcome. I'm glad I could be of help.

Please log in to post a comment

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