CODEWITHSUNDEEP
javascripthtmlcss
beautyandthebeast
beautyandthebeast

Reputation: 15

How to keep the same padding

How can I keep box 1,2,3 the same size? Even if the text gets out of the box, that's fine, cause they will be larger.

.this-p {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 0px 0px;
  padding-bottom: 0px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  margin: 20px 50px;
  cursor: pointer;
  line-height: 2;
  border-radius: 0%;
  width: auto -webkit-box-sizing: border-box;
}
<section id="four" class="wrapper style3 special">
  <div class="container">
    <header class="major">
      <h2>hora de abrir a carteira</h2>
      <p>bora espiar ao vivo? ;)</p>
    </header>
    <ul class="actions">
      <p class="this-p"> <br> <span class="this-span"> PLANO BÁSICO </br> </span> 15 minutos </br>
        Janela fechada </br>
        Persiana 3/4 fechada </br>
      </p>
      </a>
      </li>
      <p class="this-p"> <br> <span class="this-span"> PLANO NA MÉDIA </br> </span> 30 minutos </br>
        Janela meia fechada </br>
        Persiana 2/4 fechada </br>
      </p>
      </a>
      </li>
      <p class="this-p"> <br> <span class="this-span"> PLANO TOP </br> </span> 60 minutos </br>
        Janela totalmente aberta </br>
        Persiana aberta </br>
      </p>
      </a>
      </li>
    </ul>
  </div>
</section>

3 boxes

ps: also, is there any way I can remove the clickable option on those boxes? I don't know if i have to find the parent or something. Thank you.

Upvotes: 0

Views: 293

Answers (1)

Andrzej Zi&#243;łek
Andrzej Zi&#243;łek

Reputation: 2319

If you want elements to have same width, you need to define it. Removing coursor: pointer removes 'clickable' pointer.

Key part

.this-p {
  width: 150px;
  ...
}

Snippet

.this-p {
  width: 150px;
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 0px 0px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  margin: 20px 50px;
  line-height: 2;
  border-radius: 0%;
  width: auto -webkit-box-sizing: border-box;
}
<section id="four" class="wrapper style3 special">
  <div class="container">
    <header class="major">
      <h2>hora de abrir a carteira</h2>
      <p>bora espiar ao vivo? ;)</p>
    </header>
    <ul class="actions">
      <p class="this-p"> <span class="this-span"> PLANO BÁSICO </br> </span> 15 minutos </br>
        Janela fechada </br>
        Persiana 3/4 fechada </br>
      </p>
      </a>
      </li>
      <p class="this-p"> <span class="this-span"> PLANO NA MÉDIA </br> </span> 30 minutos </br>
        Janela meia fechada </br>
        Persiana 2/4 fechada </br>
      </p>
      </a>
      </li>
      <p class="this-p"> <span class="this-span"> PLANO TOP </br> </span> 60 minutos </br>
        Janela totalmente aberta </br>
        Persiana aberta </br>
      </p>
      </a>
      </li>
    </ul>
  </div>
</section>

Upvotes: 1

Related Questions