Skip to content
Submitted 3 months ago

Product preview Card Website

Abdulsamad•140
@Abdul-ade
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 specific areas of your project would you like help with?

I hope my project preview stops jumping higher than it should. I do not really know how to make it appear inline with the solution.

Community feedback

  • Grace•32,190
    @grace-snowPosted 3 months ago

    I can see quite a lot of issues in this challenge but before going through them, particularly styling ones, I'll leave you with this post which explains what is needed in html: https://fedmentor.dev/posts/html-plan-product-preview/

    Make the changes to html first then I'll give feedback on styles.

    Also worth you reading: https://fedmentor.dev/posts/rem-html-font-size-hack/

    Marked as helpful
    0
    Abdulsamad•140
    @Abdul-adePosted 3 months ago

    @grace-snow thank you for taking your time to view my code, it seems I still have issues with semantic HTML and also accessibility. I'll read more on accessibility and hopefully make good projects for all kinds of users. Thank you

    0
  • Marzia Jalili•4,250
    @MarziaJaliliPosted 3 months ago

    Excellent work!!!

    here's a breakdown of how you can solve the puzzle you encounter:

    Apply these lines of code to the body selector:

    display: grid;
place-items: center;
min-height: 100vh;

    The issue comes from the <div class="attribution">, the code I have set for centerizing the card will only work if it's the only child element of the body element.

    you have two choices:

    • you can either wrapp every thing in the <body> element inside another element like the <main> element.
    • or you could completely get rid of the <div class="attribution"> element.

    It will definitely work out😎.

    Hope it was something worth reading😅.

    Marked as helpful
    0
    Abdulsamad•140
    @Abdul-adePosted 3 months ago

    @MarziaJalili thank you very much, I've always wondered why my screenshot looks different despite everything. I have applied your feedback and it works perfectly now without any error in report. Thank you

    1

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