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 using Flexbox, media queries

Monica 100

@monicamclaughlan

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


Would appreciate any and all feedback, still very new to styling and utilizing media queries in the best way! Thanks!

Community feedback

P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hello there, Monica! 👋

Nice to see you complete another challenge! 😀 Good work on this one! 👍

A few things I'd like to suggest are,

  • Adding a max-width to the main container or wrapper to ensure that the content of the site doesn't become too wide or stretched on extra-large screens.
  • Doing a little more work on the responsiveness of the site. Currently, the design doesn't scale down between the desktop and mobile layouts very well (things get quite squished before the layout transitions from desktop to mobile). It's important to make sure that your site looks good on desktop and mobile screens and everything in between so that the maximum number of users can enjoy your work. 😉

Of course, keep coding (and happy coding, too)! 😁

1

Monica 100

@monicamclaughlan

Posted

@ApplePieGiraffe thank you for your comments!

For the responsiveness, is this best achieved with the media queries? Or is there another avenue I should explore as well?

As always, thanks for your advice!

1
P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

@monicamclaughlan

Hey! 👋

I think media queries are definitely the way to go for making websites responsive. What I like to do is open up Chrome's dev tools and slowly decrease the size of the responsive viewport (or increase it, if I'm taking a mobile-first approach) until I see something on my site that looks squished or broken. Then, I'll use a media query to adjust that portion of the website to fit the current screen size. In this way, I usually catch most of the bugs that might appear in the layout or design of my site at different screen sizes.

As a tip, I suggest trying to use min-width in your media queries (as opposed to max-width) because that works well with a mobile-first approach and may give browsers the option to load fewer styles on mobile devices, which can save those devices a little bit of bandwidth and give your site a (slightly) faster load time.

If you're clever, you can play around with flexbox and CSS grid to create some layouts that are responsive without any media queries. However, I think this only works well for certain types of layouts created with those two layout methods, and using media queries will often simply make your life easier when making entire websites responsive.

If you're using JS in your site (like via a framework or something), you might be able to load different elements based on the size of the screen, and that's another way you can make sites responsive (but that's essentially the same idea behind media queries and you'll probably be using media queries like 90% of the time, anyway, I think).

If you'd like to learn more about media queries, check out this great article by CSS Tricks. Media queries can be used to change things on your site based on a lot more than just the width and height of the viewport. 😉

Hope those tips help! 😊

Have fun coding! 😁

Oh, and hey, if you found these comments helpful, an upvote would be appreciated! ;)

1
Monica 100

@monicamclaughlan

Posted

@ApplePieGiraffe thank you so much! I did not know about the upvotes and will definitely do that from now on!

Will check out that article and read up more on media queries. Learning more about JS now so may be able to implement that for responsiveness in the future.

But again, thanks for your feedback and your responses. It is much appreciated!

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