Stats preview card component with html, css, flexboxes,...
Design comparison
Solution retrospective
I still have (at least) two imperfections on which I could use your help:
-
I don't know why on desktop my "text" section and my "image_container" section are not respecting the 50% width that I gave them. The text section is wider!
-
I don't know how to remove the purple line below the image on the mobile view. It seems to be the #image_container:after overlapping, but I do not see how I can fix it.
Community feedback
- @anmolkapilPosted over 3 years ago
I can't access your code on github. It is showing Page not found error.
I did a simple inspect element on your website and found the reason for your issues.
-
Your text section has 5% padding. padding is getting added to the 50% width. Use "box-sizing: border-box" property to fix this issue. Read here: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
-
Don't use pseudo element. Apply both background image and background color and then use image blending. https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
Marked as helpful5@FloripinPosted over 3 years ago@anmolkapil thanks for those nice solutions! Just applied them, works great!
0 -
- @Smita-14Posted over 3 years ago
Hey Floripin! I too met with these scenarios and I was able to fix it so I'll try my best to help you out here:
-
If you add max-width:40% to the text class, it will allow both the image_container and text class to fill in the 50/50 space. But sorry I am not sure why that happens. This could be because of the paddings and margins or it could be that the text area is taking as much space it wants and so does the image_container. Here the image does has a limit ( it has fixed pixels whether or not you specify it) but the text part doesn't so it takes the leftover space after the image_container is done taking the space it needs.
-
The image is an inline element so properties like line-height and font-size would affect it. Setting display:block or display:inline-block would solve the issue. StackOverflow | IMG has 5px extra padding at bottom of div
I hope that helps.
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