Skip to content
Submitted almost 2 years ago

Product Cardview

JJ Fuentes•140
@jjfuentes13
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

Found issues trying to import google fonts, what changes or mistakes did I make?

What are some best practices to have divs be centered?

Community feedback

  • Josh•320
    @Ao-chiPosted almost 2 years ago

    Hi! For the google fonts, I think you did it right, it's just that Fraunces font is nowhere to be found in google fonts (at least on my end).

    As for centering the div there are several ways and this is one of it. I checked your code in chrome dev tools and found some improvements to make. First, you can add a height: 100% to both your <html> and <body> elements. Then you could get rid of the margins on your container class <div> like this:

    .container {
    grid-template-rows: 0;
    grid-template-columns: repeat(2, 1fr);
    width: 600px;
    height: 450px;
}

    After that you can add this to your body styling:

    body {
    background-color: hsl(30, 38%, 92%);
    margin: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
}

    This is one way you could do it.

    Also I found that you nested an <a> element in your button. you can get rid of the <a> also for it is not a valid markup as per HTML5 Spec Document from W3C.

    For the <img> you should add an alt attribute like this <img class="cart" src="images/icon-cart.svg" alt="cart icon">

    Hope this helps! Have a nice day~

    Marked as helpful
    0
  • Account deleted

    You didn't use quotations around the font name, it should be 'Fraunces', sans serif; , not just Fraunces; . Also, it's generally better for you to import the fonts in the HTML than in the CSS, just copy those three link tags google fonts generate and paste them inside the head tag!

    As for the div, you can make the container a display flex and use both justify-content and text-align with center or use margin: auto, but for the block (top and bottom) margin to work, the container needs to have a height, even if it is in percentage, so flexbox may be better as it's good to avoid setting heights.

    Hope I can 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