Skip to content
Submitted almost 2 years ago

Product View Challenge | HTML & CSS

Melyssa Moya•60
@dntfindmel
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

Community feedback

  • Hassia Issah•50,650
    @HassiaiPosted almost 2 years 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
    0
    Melyssa Moya•60
    @dntfindmelPosted almost 2 years 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.

    0
  • Ambe Mbong-Nwi Nchang•550
    @Ambe-Mbong-NwiPosted almost 2 years 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
    0
    Melyssa Moya•60
    @dntfindmelPosted almost 2 years 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.

    0
    Ambe Mbong-Nwi Nchang•550
    @Ambe-Mbong-NwiPosted almost 2 years ago

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

    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