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

Social Proof Section Solution

Queen 60

@UmesiQueen

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Oh Well, Another challenge completed. Your feedback will be appreciated 🙂

Community feedback

David 8,000

@DavidMorgade

Posted

Hello Queen, congrats on finishing the challenge! good job using flex-layout you nailed it!

There is just a little problem, your media querie is limiting the styling for mobile versions and is causing the site to broke from 375px to 1000px, this is because you used @media(min-width: 376px) for your desktop styles, this means that your mobile styles will only work from 0 to 375px, that means that they won't target that much of mobiles (maybe only iphone SE and mini).

If you want to fix it, try putting a higher value in your media queries, for example 768px (if you do this it will still be broken at 768 but you can re-style for a tablet size) or just 1100~px wich is when the layout fits perfect.

If you have any questions regarding this, don't hesitate to ask I'm here to help you as much as I can

Marked as helpful

1

Queen 60

@UmesiQueen

Posted

Hey @DavidMorgade , thank you very much for your feedback. I didn't pay attention to this before, I just followed the media query instruction from the style guide provided.

I have now made adjustment to my code and other solutions. Will keep this in mind for my future projects. Thanks

1

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