Skip to content
Submitted over 3 years ago

Mobile-first solution using CSS Flexbox

Bianca•145
@Blanket25
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

I tried to align the purple cards with "align-items" and "align-self"(on the desktop version), but it didn't work...I had to use margins....Would someone explain me why it wouldn't work? Thanks!

Community feedback

  • Nunc•100
    @NuncEstBibendumPosted over 3 years ago

    Hi !

    To align the purple cards in a flex container, you can indeed use "align-self" with "flex-start" for the first card, "center" for the second and "flex-end" for the last. You also have to set a "height" (height: 300px; for instance) to your card container (div class="reviews" in your case) to make it work. If you don't set a height, the container will be the same size as the cards and it won't work !

    Nice work and cheers :)

    Marked as helpful
    0
    Bianca•145
    @Blanket25Posted over 3 years ago

    @NuncEstBibendum Oh I see! My mistake was not setting a height.. Thank you!!

    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