Skip to content
Submitted about 2 years ago

Four card section - Need help for responsivity

Bryan•130
@MamieNorris
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello guys,

Hope you're doing great ! Just finished this project. I must say I am really proud of myself. When I started this one I had absolutely no idea how to display those fours containers but thanks to Google I managed :D

I only have one issue though: I used media query to make my project responsive. It works BUT only on desktop, it doesn't work when I open the website on my phone. I had the same issue for all my projects (realising just now) and I have no idea why. The media query looks fine.

Could you please have a quick look at my CSS file, right at bottom, to see what's wrong ?

Cheers !

Community feedback

  • Ilesanmi Emmanuel•110
    @IlesanmieaPosted about 2 years ago

    Hello Bryan, I am glad you are proud of yourself in this project. I have previewed your website and see that you are doing well because responsive on my mobile Nokia Smartphone.

    I went further to check your Codes on Github which looked nice and professional. About the Media Queries, I am suggesting you use @media (max-width: 600px) instead of @media (min-width: 600px) for mobile screens.

    1. This shows that the particular units or pexels as used in your codes will work for screens from 600px downwards.

    2. But min-width would only work for screens from 600px upwards.

    If at all you want to use the min-width try to state for others smaller screens like 500px below.

    The reason is because the

    1
    Bryan•130
    @MamieNorrisPosted about 2 years ago

    Hi Emmanuel ! Thank you for your feedback, it puts a smile on my face :D

    Actually, I figured out why my media querie wasn't responsive, fixed it and updated my Github before your review. Thank you for the explanation between min-width and max-width for media querie. It wasn't unclear which one to use before.

    Have a good one !

    0
    Ilesanmi Emmanuel•110
    @IlesanmieaPosted about 2 years ago

    @MamieNorris

    I am happy to hear this

    Happy Coding.

    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