I’m trying to make this purple square looks like this image:
But mine looks like this from the code. Why the square isn’t with the height that i put?
.motivosContent {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.motivo {
width: 311px;
background-color: gray;
border-radius: 15px;
height: 56px;
position: relative;
text-align: center;
}
.motivo::after {
content: url('https://img.selecoesbrasil.com.br/lp-zc_042023_icon-quadrado-roxoa.jpg');
position: absolute;
left: 0;
top: 0;
height: 56px;
width: 56px;
}
<section id="motivos" class="py-5">
<div class="container col-sm-10">
<h2 class="titulo text-center mx-5 mb-4">A <span>terapia online</span> é para você que busca tratar e superar... </h2>
<div class="motivosContent text-center">
<div class="motivo py-3">Ansiedade</div>
<div class="motivo py-3">Depressão</div>
<div class="motivo py-3">Burnout</div>
<div class="motivo py-3">TDAH</div>
<div class="motivo py-1">Problemas nos<br>relacionamentos</div>
</div>
</section>
3
Answers
Set it as the
background-image
instead on the pseudo-element.Also, forgot to close your
.container
div.You can try using
background-image
&background-size
instead ofcontent
. I added a border radius to the image so it will cut down the whitespace to copy the image you posted. And changed the gray to light gray which is not significant.Unclear if you ARE using bootstrap but here I use it but also put some custom CSS in where I use
grid
and position an element to the left and one to the right. This does NOT use the custom jpg background but just uses a background color and a radius on the element. Some of the grid could also be simply done with bootstrap classes but included here just to illustrate a pure CSS example.I could have also avoided the CSS where I push the grey behind the purple if I had added a wrapper for the two elements and put the gray on the wrapper in the background.
Note also I can change the color of the icons with the use of something besides the white:
color: #FFFFFF;
for example a lime greencolor: #00FF00;