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>
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%);
}
Images of the current layout
Any feedback or tips is greatly appreciated.
Top comments (6)
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.
Wow never heard about Wes Bos. I'll make sure to check it out. Thank you!
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.
Thank you so much. Really appreciate the advice.
De nada, si hay mas dudas mira aqui
jonmircha.com/flexbox
Thanks again!