Responsive Stats Preview Card using HTML5 and CSS3-Flexbox
Design comparison
Solution retrospective
- Please Review on My Code Styles and Rules used in this Project
Community feedback
- @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
andright-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
andwidth
value. This breaks the natural behavior of responsive HTML. Remove all ofwidth
andheight
values from your elements. You can usemax-width
property for your container to keep its children amaximum 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;
andjustify-content: flex-start;
If you don't declare any rules foralign-items
andjustify-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 helpful0
Please log in to post a comment
Log in with GitHubJoin 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