Skip to content
Submitted over 3 years ago

Responsive Card using Flexbox and Media Query

Q•60
@QZheng16
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Learn decent bit from this challenge. Just have a question about what's the best way to program an responsive website. Is it better to handle the element layout's responsive end using media queries or should I try to make sure that it's mostly handle by for example flexbox. A example will be I used media query to change the flex-direction from row to column on certain elements when it reach an min-width. I also thought that I could of done it using flex-wrap, which will handle the layout when it changes from mobile to desktop. I guess my question is does this matter for best practices sake or is it as long as it works kind of situation?

Community feedback

  • P
    Ken•4,915
    @kens-visualsPosted over 3 years ago

    Hey @QZheng16 👋🏻

    I have some suggestions to help you fix the HTML issues and some other things.

    • First, instead of img it should be picture in this case, since you're using responsive images. Also, add aria-hidden="true”, because it's for decoration. You can read more about aria-hidden here. So all of this should look like this:
    <picture>
    <source srcset="images/image-header-mobile.jpg 400w" 
            media="(max-width: 400px)">
    <img src="images/image-header-desktop.jpg" alt="" aria-hidden="true”/>
</picture>
    • I won't go into many details about resetting CSS, but I'll leave this cool article here, which will make more sense than my brief explanation.
    • To answer your question, in modern day and age CSS allows us to make some responsive layouts without using media queries a lot of the time, but it's not always true. So even though flexbox and grid are here to help us, yet they cannot replace media queries. Because media queries are not only used for layout stuff, but also font-size margin, padding, etc.

    I hope this was helpful 👨🏻‍💻 other than that, you did a nice job for your second project, keep it up. Cheers 👾

    Marked as helpful
    1
    Q•60
    @QZheng16Posted over 3 years ago

    Thanks man, I’ll update my code with what you suggested. I’ll play around more with pictures, first time I’ve heard of that. I was gonna go with background-image but wanted to try to get it to work with img element. Read a little more in reset etc. It was a good read, I’ll definitely start using normalize.css in rest of my projects now. Man I really like this platform, people just add on little bit of tidbits each time and learn new stuff as I go. @kens-visuals

    0
    P
    Ken•4,915
    @kens-visualsPosted over 3 years ago

    @QZheng16 you're welcome man, I'm glad that me and others on the platform can be helpful 😇 I'd really appreciate if you could mark the comment as helpful 🙃

    0

Please log in to post a comment

Log in with GitHub

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