Submitted about 1 year ago

Responsive Stats Preview Card using HTML5 and CSS3-Flexbox

Koya Narendra•70

@NarendraKoya999

Preview site View code

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

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Please Review on My Code Styles and Rules used in this Project

Community feedback

Alper•1,010

@adonmez04Posted about 1 year ago

Hi, @NarendraKoya999. That's a good solution. Keep coding. Here are some important tips.

1 - You should have at least one main element in your page. So you can markup your HTML in this style:

<body>
  <main>
    <div class="card"></div>	
  </main>
</body>

And you can give more meaningful names to your card items, such as:

<div class="card">
  <div class="image-area"></div>
  <div class="content-area"></div>
</div>

left-content and right-content don't make sense because they'll change their position depending on the screen size of the device.

2 - You don't need to give your container element a height and width value. This breaks the natural behavior of responsive HTML. Remove all of width and height values from your elements. You can use max-width property for your container to keep its children a maximum width like:

  .card {
    max-width: 1110px;
  }

and

@media (max-width: 768px){
.card {
    max-width: 327px;
}
}

3 - Also you don't need to change the flexbox behavior for your container. Keep their values as the default like: align-items: strecth; and justify-content: flex-start; If you don't declare any rules for align-items and justify-content, these properties will be used by default.

.card {
    display: flex;
    /* align-items: center; */
    max-width: 1110px;
    /* justify-content: center; */
    /* height: 70%; */
    padding: 40px 0;
    border-radius: 10px;
}

4 - You can add a display: block declaration block to your image to remove some margin at the bottom of the image, such as:

.right-content img {
 display: block;
 max-width: 100%;
}

This will make your image more responsive and easier to control.

I hope these will help you. Keep coding and have a wonderful day.

Marked as helpful

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