Social proof section using Flexbox, media queries

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  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

  @monicamclaughlanPosted almost 4 years ago

  @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

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @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

  @monicamclaughlanPosted almost 4 years ago

  @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