DEV Community

Cover image for Flexbox Help
Chantae P.
Chantae P.

Posted on

Flexbox Help

Hello Dev community,
I have been working on the Frontendmentor Social Proof Section project for over a week. I have been stuck on using Flexbox. I understand the fundamentals for using Flexbox thanks to flexbox froggy. Here is what I understand so far:

  • justify-content is used to position items on the main axis (horizontally).

  • align-items & align-self are used to position items on the cross axis(vertically)

  • flex-direction is used to position items in a row(horizontally) or column(vertically).

  • flex-wrap is used to wrap items

The are where I am struggling is HOW to position items using flex-box.

HTML Code

<main>
        <div class="container">
            <div class="heading">
          <h1>
          10,000+ of our users love our products.
         </h1>
         <p>
          We only provide great products combined with excellent customer service.
          See what our satisfied customers are saying about our services.
         </p>
        </div>

          <div class="star-rating reviews"> 
            <span class="stars">⭐⭐⭐⭐⭐ </span>Rated 5 Stars in Reviews
          </div>
         <div class="star-rating guru">  
           <span class="stars">⭐⭐⭐⭐⭐ </span>Rated 5 Stars in Report Guru
          </div>
         <div class="star-rating besttech"> 
          <span class="stars">⭐⭐⭐⭐⭐ </span>Rated 5 Stars in BestTech
          </div>
    </div>
</main>

     <section class="testimonials">
          <div class="review-box colton">
          <img src="images/image-colton.jpg" alt="colton-smith">
        Colton Smith 
        <span>Verified Buyer</span>
        "We needed the same printed design as the one we had ordered a week prior.
        Not only did they find the original order, but we also received it in time.
        Excellent!"
        </div>


      <div class="review-box irene">
        <img src="images/image-irene.jpg" alt="irene-roberts">
        Irene Roberts 
        <span>Verified Buyer</span>
        "Customer service is always excellent and very quick turn around. Completely
        delighted with the simplicity of the purchase and the speed of delivery."
      </div>


      <div class="review-box anne">
        <img src="images/image-anne.jpg" alt="anne-wallace">
        Anne Wallace 
        <span>Verified Buyer</span>
        "Put an order with this company and can only praise them for the very high
        standard. Will definitely use them again and recommend them to everyone!"
      </div>

  </section>
Enter fullscreen mode Exit fullscreen mode

CSS Code

body {
    font-size: 15px;
    font-family: 'Spartan', sans-serif;
    text-align: center;
}

.container {
    display: flex;
    flex-direction: row;
    height: 20vh;

} 

.heading {
    border: 10px solid purple;
    flex-direction: column-reverse;
    justify-content: flex-start;
}

h1 {
    justify-content: flex-start;
}


section {
    display: flex;
    border: 5px solid paleturquoise;
    justify-content: right;
    flex-wrap: wrap;
}

div.review-box.colton {
    background-color: palevioletred;
    justify-content: left;
    align-items: flex-end;

}
/* h1, p {
    width:75%;
}

h1 {
    color: hsl(300, 43%, 22%);
}

p {
    color: hsl(300, 24%, 96%);
    color: hsl(303, 10%, 53%);
}

span {
    color: hsl(333, 80%, 67%);
}

section {
    padding: 10 40px;
}

img {
    border-radius: 50px;
} */

/* star rating */
.star-rating {
    background-color: hsl(300, 24%, 96%);
    justify-self: flex-start;
    flex-wrap: wrap;
    border: 10px solid pink;
}

/* .stars {
    padding: 0px 20px;
}

.guru {
    justify-self: flex-end;
    margin-left: 50px;
}

.besttech {
    margin-left: 100px;
}  */

/*testimonials */
.testimonials {
    display: flex;
    padding: 0 10rem;
    margin: 100px;
    justify-content: space-between;
}

 .review-box {
    background-color: hsl(300, 43%, 22%);
    border-radius: 10px;
    padding: 20px;
} 

/* .colton {
    background-color: blue;
}


/* footer */
footer {
   color: black;
}

.attribution {
    font-size: 11px;
    text-align: center;
}

.attribution a {
    color: hsl(228, 45%, 44%);
}

Enter fullscreen mode Exit fullscreen mode

Images of the current layout

Top of the web page

Remaining part of webpage

Any feedback or tips is greatly appreciated.

Discussion (6)

Collapse
iakovosvo profile image
iakovosvo • Edited on

If you just remove flex-wrap from section they will align horizontally. Also when you work with flex or grid you can use gap instead of padding. TIP: take the free course What the flexbox from Wes Bos.

Collapse
taepal467 profile image
Chantae P. Author

Wow never heard about Wes Bos. I'll make sure to check it out. Thank you!

Collapse
lean7991 profile image
Lean7991

Hola, novato aqui :D
Si buscas que todos las cartas se alinien horizontalmente, encierra todos los div-card
dentro de un div padre y dale a este la propiedad "display: flex;" esto activa las demas propiedades, mucha suerte.

Collapse
taepal467 profile image
Chantae P. Author

Thank you so much. Really appreciate the advice.

Collapse
lean7991 profile image
Lean7991

De nada, si hay mas dudas mira aqui
jonmircha.com/flexbox

Thread Thread
taepal467 profile image
Chantae P. Author

Thanks again!