I have three div classes inside one flexbox and the first one isn't working properly it's larger than the other ones. I tried to see through the console, though I can't figure it out. I attached a screenshot and a code for the "box" itself. What can I do to fix this issue? Is it something with padding, margins perhaps.
:root {
--very-dark-magenta: hsl(300, 43%, 22%);
--soft-pink: hsl(333, 80%, 67%);
--dark-grayish-magenta: hsl(303, 10%, 53%);
--light-grayish-magenta: hsl(300, 24%, 96%);
--white: hsl(0, 0%, 100%);
--ff-primary: "Spartan", sans-serif;
--fs400: 0.8125rem;
--fs500: 0.9625rem;
--fsmobile: 2rem;
--fsdesktop: 2.5rem;
}
/* Reminder: 400, 500, 700 font-weights; */
* {
box-sizing: border-box;
margin: 0;
}
body {
font-family: var(--ff-primary);
padding-top: 5rem;
}
/* Utilities */
.container {
max-width: 70em;
padding: 0 1.8em;
margin: 0 auto;
}
.flow-content>* * {
margin-top: var(--flow-space, 1rem);
}
/* Inside Container *container */
.split {
display: flex;
flex-direction: column;
text-align: center;
gap: 1em;
}
.a-center {
align-items: center;
}
/* Inside Split Container */
h1 {
color: var(--very-dark-magenta);
font-size: var(--fsmobile);
line-height: 1;
max-width: 12ch;
margin-left: auto;
margin-right: auto;
margin-bottom: 0.8em;
}
.subtitle {
color: var(--dark-grayish-magenta);
font-size: var(--fs500);
font-weight: 500;
line-height: 1.7;
}
.rating {
background-color: var(--light-grayish-magenta);
color: var(--very-dark-magenta);
font-weight: 700;
padding: 0.5em;
border-radius: 7px;
max-width: 26em;
margin-left: auto;
margin-right: auto;
}
.rating::before {
content: '';
display: block;
width: 5.625em;
height: 1em;
margin: 0 auto;
margin-bottom: 0.5em;
background-image: url(images/icon-star.svg);
background-repeat: space;
}
.review {
text-align: left;
background-color: var(--very-dark-magenta);
padding: 2em;
max-width: 26em;
border-radius: 7px;
margin-left: auto;
margin-right: auto;
}
/* Inside Review Block */
.subreview {
display: inline-block;
}
.name {
color: var(--white);
font-weight: 700;
font-size: var(--fs400);
margin-bottom: 0.7em;
}
.profile__status {
color: var(--soft-pink);
font-weight: 400;
font-size: var(--fs400);
}
.opinion {
color: var(--light-grayish-magenta);
font-size: var(--fs400);
line-height: 1.7;
margin-top: 1.7em;
}
.review img {
display: inline-flexbox;
border-radius: 50%;
width: 2.7em;
margin-right: 1.5em;
}
/* Media queries */
@media screen and (min-width: 21.875em)
/* breakpoint 350px phones ---> tablets */
{}
@media screen and (min-width: 63.75em)
/* breakpoint 1020px tablets ---> smaller desktops */
{
h1 {
text-align: left;
margin: 0;
}
.subtitle {
text-align: left;
margin: 0;
}
.split {
flex-direction: row;
}
}
@media screen and (min-width: 75em)
/* breakpoint 1200px desktops ---> larger screens */
{
h1 {
font-size: var(--fsdesktop);
text-align: left;
margin: 0;
}
}
@media screen and (min-width: 75.0625em)
/* breakpoint 1200px screen width */
{}<main>
<div class="container">
<div class="split">
<div class="heading">
<h1>10,000 of our users love our products.</h1>
<p class="subtitle">We only provide great products combined with excellent customer service. See what our satisfied customers are saying about our services.</p>
</div>
<div class="status flow-content">
<div class="rating">Rated 5 Stars in Report Guru</div>
<div class="rating">Rated 5 Stars in Reviews</div>
<div class="rating">Rated 5 Stars in BestTech</div>
</div>
</div>
<div class="reviews split flow-content">
<div class="review">
<img src="images/image-colton.jpg" alt="Colton Smith">
<div class="subreview">
<p class="name">Colton Smith</p>
<p class="profile__status">Verified Buyer</p>
</div>
<p class="opinion">"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!</p>
</div>
<div class="review">
<img src="images/image-irene.jpg" alt="Irene Roberts">
<div class="subreview">
<p class="name">Irene Roberts</p>
<p class="profile__status">Verified Buyer</p>
</div>
<p class="opinion">"Customer service is always excellent and very quick turn around. Completely delighted with the simplicity of the purchase and the speed of delivery."</p>
</div>
<div class="review">
<img src="images/image-anne.jpg" alt="Anna Wallace">
<div class="subreview">
<p class="name">Anna Wallace</p>
<p class="profile__status">Verified Buyer</p>
</div>
<p class="opinion">"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!"</p>
</div>
</div>
<!-- split container -->
</div>
<!-- class container -->
</main>Here is a full link for the code:
Codepen
CodePudding user response：
add margin-top 0px in this class or you can add margin-top 20px to balanced them
.review {margin-top 0px}
CodePudding user response：
This is because .flow-content > * *.
CSS x y selector selects y element that is next to the x element.
So .flow-content > * * doesn't select the first .review and selects second and third .review elements.
As you can see those elements have margin-top.
So you can do it by removing flow-content class from reviews element or adding margin-top: 0 !important to review elements.
CodePudding user response：
I have reviewed your code, I found you have following css style code:
.flow-content > * * {
margin-top: var(--flow-space, 1rem);
}
This rule will select the .review element expect the first one, so the last two .review elements both have margin-top.
If you want to make the three .review elements both have margin-top, you can try following code:
.flow-content > .review {
margin-top: var(--flow-space, 1rem);
}