Responsive stats preview card using HTML, CSS flexbox and media query
Design comparison
Solution retrospective
Here I did mobile first design, which was easy to change using media query for desktop design. But as I am still new to media queries I having some doubt that when to use min-width and when to use max-width and during reducing the width of the page I found some overflow of contents which was giving scroll bar, how to fix that any ideas. The main difficulty for me was to change the image color to slightly purple (or given color). As I tried using filter-hue rotate but It was not applied to the already black and white image. Any Ideas how to do it easy way.
Community feedback
- @vanzasetiaPosted about 2 years ago
Hi again, Webdevsonu! 👋
Congratulations on finishing another challenge! 🎉
If you are following the mobile-first approach then you will use
min-width
media queries. So, there is nothing to be confused about.Regarding the scrollbar on the card, I recommend making the following changes:
Remove all the code that I commented on.
main { /* border: 1px solid none; */ note: invalid value "none" border-radius: 10px; background-color: hsl(244, 38%, 16%); /* width: 60vw; */ note: the card needs a max-width, not a width /* height: auto; */ note: it's already the default behavior color: hsl(0, 0%, 100%); /* overflow: auto; */ overflow: hidden; note: make the image follow the card's border-radius /* margin: auto; */ } @media (min-width: 1024px) .contents { display: flex; flex-direction: row; justify-content: space-between; /* padding-right: 80px; */ /* margin-top: 80px; */ }
Set all elements
box-sizing: border-box
. This way, thepadding
doesn't add more width to all elements.Make the
img
as a block element and setmax-width: 100%
. It makes working withimg
easier. Then, setwidth: 50%
to the image.By doing those things, the overflowing should disappear. But, the card needs more adjustments to be responsive. I recommend simplifying the styling.
I hope this helps. Happy coding!
Marked as helpful0 - @noonecaresman023Posted about 2 years ago
Hello, what you can try to do is use background: url(./path) property so instead of having a <img> element you would have a div element which is going to be like <div class="img"><div class="color-overlay"></div></div>. Try to play around with it as it I think it gives you more freedom in manipulating images. Instead of having some of your css design property have a value of auto, try setting them with either rem, em or px. My other advice would be to use less divs in the future and use semantic html elements and for me at least, I try to avoid styles inside my html file, but I think for your case it works better. Good job!
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