Skip to content
Submitted almost 3 years ago

Grid and Flexbox Responsive Design

Rapha445•100
@Rapha445
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social proof section
  • HTML
  • CSS
1newbie

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•580
    @jemeneradevPosted almost 3 years ago

    Check out: https://cssgridgarden.com/

    It's a great, fun grid practice game.

    To be honest, grid might have complicated things a bit.

    <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
    @Rapha445Posted almost 3 years ago

    @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

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