Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Four card section - Need help for responsivity

Bryan 130

@MamieNorris

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@Ilesanmiea

Posted

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

@MamieNorris

Posted

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

@Ilesanmiea

Posted

@MamieNorris

I am happy to hear this

Happy Coding.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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