csssizepaddingmarginsections

CSS: Change section size

I have a problem with my webpage, there´s a huge gap between my last section and my call to action. How could you solve it? Thanks for the support!

This the HTml for the certificate section. I think the problem is in CSS but i think the reference will be better if i add th HTML.

<section class="certificado">
<h1>Nuestras certificaciones</h1>
<div class="row">
    <div class="certificado-col">
        <img src="fotos/certificado_ISO.jpg" id="ISO">
        <div>
             <h4><br>
                <br>
                <br>
                <br>Estamos certificados con el sistema<br><h4/>
        </div>
    </div>
</div>
</section>

This is the section for the call to action, it works just fine.


<section class = "cta">
    <h1>Nos encantaría trabajar contigo</h1>
         <a href="" class="hero-btn">Cotiza tu proyecto con nosotros</a>
</section>

This is the CSS, where the magic should happen. But it makes a huge gap between the last section and the call to action.

.certificado{
    width: 100%;
    height: 10%;
    margin: auto;
    padding-top: 80px;
    text-align: center;
    display: auto;
}
.certificado-col{
    flex-basis: 10%;
    border-radius: 10px;
    margin-bottom: 1%;
    margin-left: 10%;
    text-align: left;
    padding: 30px;
    cursor: default;
    display: flex;
  
}
.certificado-col img{
   height: 50%;
   width: auto;
   border-radius: 20%;
   
}
.certificado-col p{
    padding: 0;
}
.certificado-col h3{
    margin-top: 15px;
    text-align: left;
}

Here´s the section for the call to action. It works perfect but it´s too far away from the last section, maybe the problem could be here.


.cta{
    margin: 100px auto;
    width: 80%;
    background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(fotos/closing\ deal.jpg);
    background-position: center;
    background-size: cover;
    border-radius: 10px;
    text-align: center;
    padding: 100px 0;
}
.cta h1{
    color: #fff;
    margin-bottom: 40px;
    padding: 0;
}
@media (max-width: 700px){
    .cta h1{
        font-size: 24px;
    }
}

This is the image of the gap looks between the two sections enter image description here

Solution

  • Your browser's Developer Tools is a handy tool to use. It shows the space between the two sections is made up of padding in div.certificado-col and a top margin on section.cta.

    enter image description here

    enter image description here


    Is the spacing sufficient if you remove the 100px of block margin from "cta"?
    (before/after)

    .cta {
  margin: 100px auto;
}

.cta {
  margin: auto;
}


    .certificado{
    width: 100%;
    height: 10%;
    margin: auto;
    padding-top: 80px;
    text-align: center;
    display: auto;
}
.certificado-col{
    flex-basis: 10%;
    border-radius: 10px;
    margin-bottom: 1%;
    margin-left: 10%;
    text-align: left;
    padding: 30px;
    cursor: default;
    display: flex;
  
}
.certificado-col img{
   height: 50%;
   width: auto;
   border-radius: 20%;
   
}
.certificado-col p{
    padding: 0;
}
.certificado-col h3{
    margin-top: 15px;
    text-align: left;
}

.cta{
    margin: auto;
    width: 80%;
    background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(fotos/closing\ deal.jpg);
    background-position: center;
    background-size: cover;
    border-radius: 10px;
    text-align: center;
    padding: 100px 0;
}
.cta h1{
    color: #fff;
    margin-bottom: 40px;
    padding: 0;
}
@media (max-width: 700px){
    .cta h1{
        font-size: 24px;
    }
}
    <section class="certificado">
<h1>Nuestras certificaciones</h1>
<div class="row">
    <div class="certificado-col">
        <img src="fotos/certificado_ISO.jpg" id="ISO">
        <div>
             <h4><br>
                <br>
                <br>
                <br>Estamos certificados con el sistema<br></h4>
        </div>
    </div>
</div>
</section>
<section class = "cta">
    <h1>Nos encantaría trabajar contigo</h1>
         <a href="" class="hero-btn">Cotiza tu proyecto con nosotros</a>
</section>