I'm having a problem that I can't understand why it happens,
The question is the following: I made an HTML structure, which is the following:
<section class="flex">
<article class="left">
<h1 class="left-title">
10,000+ of our users love our products.
</h1>
<h2 class="left-subtitle">
We only provide great products combined with excellent customer service.
See what our satisfied customers are saying about our services.
</h2>
</div>
</article>
<article class="right">
<div class="right-card">
<div class="stars"></div>
<img src="./images/icon-star.svg" alt="" srcset="">
<img src="./images/icon-star.svg" alt="" srcset="">
<img src="./images/icon-star.svg" alt="" srcset="">
<img src="./images/icon-star.svg" alt="" srcset="">
<img src="./images/icon-star.svg" alt="" srcset="">
<span class="right-card-text">Rated 5 Stars in Reviews</span>
</div>
<div class="right-card">
<img src="./images/icon-star.svg" alt="" srcset="">
<img src="./images/icon-star.svg" alt="" srcset="">
<img src="./images/icon-star.svg" alt="" srcset="">
<img src="./images/icon-star.svg" alt="" srcset="">
<img src="./images/icon-star.svg" alt="" srcset="">
<span class="right-card-text">Rated 5 Stars in Report Guru</span>
</div>
<div class="right-card">
<img src="./images/icon-star.svg" alt="" srcset="">
<img src="./images/icon-star.svg" alt="" srcset="">
<img src="./images/icon-star.svg" alt="" srcset="">
<img src="./images/icon-star.svg" alt="" srcset="">
<img src="./images/icon-star.svg" alt="" srcset="">
<span class="right-card-text">Rated 5 Stars in BestTech</span>
</div>
</article>
<article class="bottom">
<div class="bottom-card">
<h2 class="bottom-card-name"> Colton Smith</h2>
<h3 class="bottom-card-verify">Verified Buyer</h3>
<p class="bottom-card-text">
"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 class="bottom-card">
<h2 class="bottom-card-name">Irene Roberts</h2>
<h3 class="bottom-card-verify">Verified Buyer</h3>
<p class="bottom-card-text">
"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 class="bottom-card">
<h2 class="bottom-card-name">Anne Wallace</h2>
<h3 class="bottom-card-verify">Verified Buyer</h3>
<p class="bottom-card-text">
"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>
</article>
SASS code:
: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%);
}
body{
font-family: 'Kumbh Sans', sans-serif;
background-color: var(--white);
background-image:url('../images/bg-pattern-top-desktop.svg');
background-repeat: no-repeat;
background-position:right 50vw bottom 70vh;
overflow: hidden;
}
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 62.5%;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
.flex{
display: flex;
height: 100vh;
width: 100vw;
padding: 5%;
}
.left{
width: 27vw;
&-title{
font-size:3.8rem;
font-family: 'Spartan', sans-serif;
color:var(--very-dark-magenta)
}
&-subtitle{
font-size: 1.1rem;
font-family: 'Spartan', sans-serif;
color:var(--dark-grayish-magenta)
}
}
.right{
width: 450px;
height: 180px;
display: flex;
flex-direction: column;
justify-content: space-between;
&-card{
padding-top: 15px;
border-radius: 10px;
width: 400px;
background-color: hsl(300, 24%, 96%);
height: 50px;
text-align: center;
justify-content: center;
&-text{
margin-left: 70px;
}
&:nth-child(2){
margin-left: 50px;
}
&:nth-child(3){
margin-left: 100px;
}
& img {
width: 15px;
flex-direction: inherit;
}
}
}
This is what I have to do:
And, by giving the class .flex
the value of:
display:flex;
Everything is positioned laterally, in this way:
(Since the windows snipping tool stopped working, and when I take a screenshot everything looks wrong, I preferred to upload it to github, you can see it by clicking here
What I need to do is that the part of the stars is on the right side of the page, and the part that is inside the "bottom" div is on the bottom side of the page, but I don't understand why flexbox gives me position it like this.
Reviewing your code, I consider that the problems are being presented to you mainly by a somewhat complex HTML structure and not well applied for the result you are looking for.
Comments:
article
?section
section
one that contains the testimonials apply flexboxSimilar to the above, now you could think of the same thing but for the stars and titles section
h1
and theh2
) can be inside anotherarticle
div
each of them ( and at least from my poor knowledge ) I would leave it that way, that is, it would not require more work therespan
and soimg
are inline elements and would appear in a row ( which to some extent should save work )section
one that contains the titles and the qualifications apply flexbox to itAlso:
h2
you have a closing tagdiv
but it doesn't appear open above anywhere .stars
, so I would dare to think about removing it from the codeSo at the HTML level it could have an initial and simplified structure like this:
What I present here is a basic structure ( all the other styles are yet to work ) which I consider a simple way to structure the information in HTML and then be able to distribute them the way you want using CSS.
I recommend check this link
Important, this is only an approximation and it would help a lot to consider the contributions of other users
In addition to correcting missing div elements, I think it would be better to remove the flex class from the section tag and better arrange the two #left and #right items inside a div with class .flex This would be more or less:
I have included the missing .bottom classes and some other small modification...
By default, the flex-direction property is set to row. Unless you change it, the elements will be placed next to each other. If you want flexbox to place the elements one below the other, you must add the class so
flex-direction: column
that it changes its direction by default.Solution
Using your classes, you should just add a couple like this:
And then your HTML you should vary it a bit so that:
When you add the property
display
with valueflex
to an element (red container) , there is a specific style that is applied by default and in the background to this same element. It is the following:flex-direction: row
makes all children (green containers) of the parent element (red square) withdisplay: flex
appear in a row.Es así porque así funciona
flexbox
, que es el motor de todo esto.Así de sencillo.
Amigo buenas noches apenas estoy aprendiendo de Html y CSS, creo que el problema es que tu etiqueta ¨Section¨ no esta cerrada, y por eso cuando le aplicas el Flex a la etiqueta section, como es la etiqueta padre se la estas aplicando a todos los elementos. Cierrala antes de empezar la seccion de abajo, aplicale un space between para separarlas y eso creo que te ayudara