Image isn't with the chosen height - Html

Awa
April 6, 2023
295 views
2 votes
3 Answers

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>

Tags: css html

Answers

Set it as the background-image instead on the pseudo-element.

Also, forgot to close your .container div.

.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: "";
  background-image: url('https://img.selecoesbrasil.com.br/lp-zc_042023_icon-quadrado-roxoa.jpg');
  background-size: cover;
  background-position: center;
  position: absolute;
  border-radius: 15px;
  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>
  </div>
</section>

You can try using background-image & background-size instead of content. 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.

.motivosContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.motivo {
    width: 311px;
    background-color: lightgray;
    border-radius: 15px;
    height: 56px;
    position: relative;
    text-align: center;
}

.motivo::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 56px;
    width: 56px;
    background-image: url('https://img.selecoesbrasil.com.br/lp-zc_042023_icon-quadrado-roxoa.jpg');
    background-size: cover;
    border-radius: 15px;
}

<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>

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.

  z-index: -1;
  margin-left: -0.25em;

Note also I can change the color of the icons with the use of something besides the white: color: #FFFFFF; for example a lime green color: #00FF00;

.motivosContent {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 3.5rem 19.5rem;
  grid-auto-rows: : 3.5rem;
  align-items: center;
  gap: 0;
  row-gap: 1rem;
}

.motivo {
  grid-column: 2;
  background-color: #80808088;
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
  text-align: center;
  z-index: -1;
  margin-left: -0.25em;
}

.image-container {
  align-self: center;
  justify-self: center;
  border-radius: 1rem;
  grid-column: 1;
  height: 100%;
  background-color: #712CF9;
  color: #FFFFFF;
  font-size: 1.6em;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>

<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 align-middle text-center fw-bold fs-3">
      <div class="image-container px-3 bi bi-emoji-dizzy "></div>
      <div class="motivo py-3 ">Ansiedade</div>
      <div class="image-container px-3 bi bi-cloud-drizzle "></div>
      <div class="motivo py-3 ">Depressão</div>
      <div class="image-container px-3 bi bi-battery-half "></div>
      <div class="motivo py-3 ">Burnout</div>
      <div class="image-container px-3 bi bi-lightning "></div>
      <div class="motivo align-middle py-3 ">TDAH</div>
      <div class="image-container pt-2 px-3 align-middle bi bi-heartbreak "></div>
      <div class="motivo py-1 ">Problemas nos<br>relacionamentos</div>
    </div>
  </div>
</section>

Please signup or login to give your own answer.

Click here to cancel reply.

Image isn't with the chosen height – Html

Answers