Joana Oliveira :
I'm trying to centre the columns inside of a row but they won't centre. I've already tried changing the code multiple times but I can't seem to find the error. Already tried to justify-content:center
and align-items:center
in both "services" and "section-3" classes and it doesn't work. I'm also not able to centre the "What I do" text which is part of the top row.
What it looks like now:
<div class="what-i-do">
<h3>WHAT I DO</h3>
</div>
<div class="row services">
<div class="column">
<div class="first-column">
<h3 class="services-title">
Content <br />
Creation
</h3>
<div class="services-text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec quam felis, ultricies nec, pellentesque
eu.
</div>
</div>
</div>
<div class="column">
<div class="second-column">
<h3 class="services-title">
Strategy <br />
Session
</h3>
<div class="services-text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec quam felis, ultricies nec, pellentesque
eu.
</div>
</div>
</div>
<div class="column">
<div class="third-column">
<h3 class="services-title">Branding</h3>
<div class="services-text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec quam felis, ultricies nec, pellentesque
eu.
</div>
</div>
</div>
</div>
</div>
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
padding: 0 100px;
}
.section-3 {
background-color: hsla(7, 56%, 85%, 0.746);
height: 500px;
width: 100%;
align-items: center;
}
.what-i-do {
font-family: "Lato", sans-serif;
color: white;
line-height: 1.8;
letter-spacing: 0.15em;
text-align: center;
transform: rotate(90deg);
padding: 100px 0px 200px 0px;
font-size: 18px;
font-weight: 700;
}
.services {
align-items: center;
justify-content: center;
}
.services-title {
font-family: "Ibarra Real Nova", serif;
align-items: center;
color: rgba(40, 44, 48, 1);
font-weight: bold;
text-align: center;
font-size: 45px;
}
.first-column {
width: 250px;
}
.second-column {
width: 250px;
}
.third-column {
width: 250px;
}
.services-text {
font-family: "Lato", sans-serif;
text-align: justify;
line-height: 1.8;
letter-spacing: 0em;
font-size: 16px;
font-weight: 300;
}
isherwood :
I don't see a display: flex
rule anywhere. Start with that, then remove your column widths as they defeat the purpose of a flex layout.
.row {
display: flex;
}
.column {
padding: 0 20px;
}
.services {
align-items: center;
justify-content: center;
}
.services-title {
font-family: "Ibarra Real Nova", serif;
align-items: center;
color: rgba(40, 44, 48, 1);
font-weight: bold;
text-align: center;
font-size: 45px;
}
.services-text {
font-family: "Lato", sans-serif;
text-align: justify;
line-height: 1.8;
letter-spacing: 0em;
font-size: 16px;
font-weight: 300;
}
<div class="row services">
<div class="column">
<div class="first-column">
<h3 class="services-title">
Content <br />
Creation
</h3>
<div class="services-text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec quam felis, ultricies nec, pellentesque
eu.
</div>
</div>
</div>
<div class="column">
<div class="second-column">
<h3 class="services-title">
Strategy <br />
Session
</h3>
<div class="services-text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec quam felis, ultricies nec, pellentesque
eu.
</div>
</div>
</div>
<div class="column">
<div class="third-column">
<h3 class="services-title">Branding</h3>
<div class="services-text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec quam felis, ultricies nec, pellentesque
eu.
</div>
</div>
</div>
</div>
Guess you like
Origin http://10.200.1.11:23101/article/api/json?id=390452&siteId=1