Submitted over 3 years ago

Mobile First Approach

Sajana Wijesinghe•460

@StormKing969

Preview site View code

This is a solution for...Stats preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

There are some issues that I wasn't able to fix and was hoping for some guidance.

For the desktop view, I wasn't able to make the card automatically appear at the center (vertically) of the screen. In order to fix that, I had to manually enter a height value. Is there another way?
In the desktop view, I wasn't able to make the stat header and value evenly spread as the viewport size increases (i.e. have the companies completely in the left, templates in the middle and queries all the away in the right).

Community feedback

Shahin NJ•1,190

@SJ-NosratPosted over 3 years ago

Hi, With regards to your questions, find below:

Your card is appearing in the center with respect to the <html> that your content takes up. If you'd like to have it properly centered for any viewport size add the following code to your existing code, as follows:

 html {
 height: 100%;
}

body, 
.container {
 min-height: 100vh;
}

This will center you .container class properly. However, you will notice that your card has expanded

Also, I'd suggest editing your below code as per the comments:

 .container {
        margin-left: auto; /* remove this! */
        margin-right: auto; /* remove this! */
        margin: 0 auto; /* add this! It will center your .container properly */
        max-width: 1440px;
        margin-top: 8%; /* remove this! */
        display: flex;
        flex-direction: row-reverse;
        border-radius: 20px;
        align-items: center;
        justify-content: center;
    }

Add the following:

body {
 display: flex;
 flex-direction: column;
 justify-content: center;
}

Why the above code? Well you're trying to center the .container class which is the child of the <body> element.

For all the stat-values I would do the following:

 <ul>
   <li>
      10k+ 
      <span>companies</span>
    </li>
    <li>
      314 
      <span>templates</span>
    </li>
    <li>
      12M+
      <span>queries</span>
    </li>
</ul>

Then I'd apply a display: flex; on it and align the content accordingly.

Lastly, please look into semantic HTML when you're trying to section content in your HTML structure, you can find the MDN article on semantic HTML here.

Hope the above helps!

Best of luck with your coding journey!

Marked as helpful

Ahmed Faisal•5,095
@afrusselPosted over 3 years ago
Nice effort as a first work. Ijust want to sat that please take a look of my solution it may help you to find your issues. https://afrussel.github.io/stats-preview-card-component-fm/
Marked as helpful
1

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