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

Grid and Flexbox Responsive Design

Rapha445 100

@Rapha445

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


Hi everyone ! :) This was my first attempt at using CSS Grid. I feel more comfortable with Flexbox so I found myself to fall back on it quite a lot. Any suggestions on my code?

Also a few questions:

  • For this challenge I couldn't figure out how to get to background position right. Any tips?
  • How can I reduce the amount of media queries that I am using?

Thank you for helping!

Community feedback

@jemeneradev

Posted

Check out: https://cssgridgarden.com/

It's a great, fun grid practice game.

<img src="images/icon-star.svg" alt=""> <img src="images/icon-star.svg" alt=""> <img src="images/icon-star.svg" alt=""> <img src="images/icon-star.svg" alt=""> <img src="images/icon-star.svg" alt="">

That's a lot of stars. Consider playing around with background-repeat and the width of a star container to get the right amount of stars.

https://css-tricks.com/almanac/properties/b/background-repeat/

Marked as helpful

0

Rapha445 100

@Rapha445

Posted

@jemeneradev Thanks for the reply! The practice game was quite helpful.

I am going to try to get five stars using only one image tag as well.

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