Skip to content
Submitted 7 months ago

Responsive Product Page

Craig Wolfe•100
@craigwolfe
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?

Using the source tag for the image. I always knew about it but never used it. I also liked creating global variables for CSS. Made CSS much faster.

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

Forgot to set max-width with on product class or main container.

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

None at this time.

Community feedback

  • Bernardo Poggioni•5,360
    @R3ygoskiPosted 7 months ago

    Hello Craig Wolf, I'd like to congratulate you on your project. It's very well done, congratulations!

    I just have one tip about your HTML. Your structure looks good, and I noticed that you're using BEM, which is great for organizing HTML structure. However, I have a small suggestion regarding HTML semantics. Your div.product__content could be an <article> because it contains self-contained content. On the other hand, your article.product could be a <main> since it's the main section of your page.

    That's it! Congratulations on your project, it's really well done. If anything I said isn't clear, please comment below, and I'll try to clarify as best as I can.

    0
  • Sivaprasath•2,520
    @sivaprasath2004Posted 7 months ago

    Hello i`ll wishing for your completion project solution.

    • I will give some suggestion i believe its used for improve your skill.
    • In mobile site the main page top & bottom page was 1rem will be hided use for this code that is more efficient in the mobile site.
    main{
margin:1rem;
}
    0
    Craig Wolfe•100
    @craigwolfePosted 7 months ago

    Unfortunately that does not change the mobile design. Also I have '1rem' on the body already. @sivaprasath2004

    0
    Sivaprasath•2,520
    @sivaprasath2004Posted 7 months ago

    Sorry. I'll not notice that @craigwolfe

    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