I am starting as a developper front-end and learning to code in HTML and CSS. I am struggling with the last section of my code, there is a big empty space, I am trying to find a solution but never could, if someone can help me, that would be perfect ! Also I would like to know what I did wrong, it'll help me to learn even more :) Here the empty spot Thanks in advance !!
.activites {
width: 100%;
display: flex;
}
.colonnesimple {
width: 25%;
display: flex;
flex-direction: column;
align-items: center;
}
.colonnedouble {
width: 25%;
display: flex;
flex-direction: column;
}
.colonnesimple img {
object-fit: cover;
height: 90%;
width: 100%;
border-radius: 16px 16px 0 0;
}
.colonnedouble img {
object-fit: cover;
height: 80%;
width: 100%;
border-radius: 16px 16px 0 0;
}
.activites .colonnesimple figure {
width: calc(100% / 1.2);
height: 59%;
margin-left: 25px;
margin-right: 40px;
box-shadow: 0px 0px 10px #55555538;
border-radius: 16px 16px 16px 16px;
cursor: pointer;
}
.activites .colonnedouble figure {
width: calc(100% / 1.2);
height: 28%;
margin-left: 30px;
margin-right: 40px;
box-shadow: 0px 0px 10px #55555538;
border-radius: 16px 16px 16px 16px;
cursor: pointer;
}
.activites .colonnesimple figure figcaption {
padding: 10px;
position: relative;
}
.activites .colonnedouble figure figcaption {
padding: 10px;
position: relative;
}<section id="activitesmarseille">
<div class="contenuactivites">
<h5>Activités à Marseille</h5>
<div class="activites">
<div class="colonnesimple">
<figure><a href="#">
<img class="imagesolo" src="images/activites/3_medium/reno-laithienne-QUgJhdY5Fyk-unsplash.jpg" alt="Image du Vieux Port">
<figcaption>
<h6>Vieux Port</h6>
</figcaption></a>
</figure>
</div>
<div class="colonnedouble">
<figure><a href="#">
<img class="imagedoublegrd" src="images/activites/3_medium/paul-hermann-QFTrLdQIRhI-unsplash.jpg" alt="Image du Fort de Pomègues">
<figcaption>
<h6>Fort de Pomègues</h6>
</figcaption></a>
</figure>
<figure><a href="#">
<img class="imagedoublept" src="images/activites/3_medium/kevin-hikari-rV_Qd1l-VXg-unsplash.jpg" alt="Image des îles du Frioul">
<figcaption>
<h6>îles du Frioul</h6>
</figcaption></a>
</figure>
</div>
<div class="colonnesimple">
<figure><a href="#">
<img class="imagesolo" src="images/activites/3_medium/kilyan-sockalingum-NR8-cBCN3aI-unsplash.jpg" alt="Image du Parc National des Calanques">
<figcaption>
<h6>Parc National des Calanques</h6>
</figcaption></a>
</figure>
</div>
<div class="colonnedouble">
<figure><a href="#">
<img class="imagedoublept" src="images/activites/3_medium/florian-wehde-xW9e8gdotxI-unsplash.jpg" alt="Image de Notre-Dame-de-la-Garde">
<figcaption>
<h6>Notre-Dame-de-la-Garde</h6>
</figcaption></a>
</figure>
<figure><a href="#">
<img class="imagedoublegrd" src="images/activites/3_medium/lena-paulin-wH2-EJoDcV0-unsplash.jpg" alt="Image du Parc LongChamp">
<figcaption>
<h6>Parc LongChamp</h6>
</figcaption></a>
</figure>
</div>
</div>
</div>
</section>CodePudding user response：
So problem was with height: 59%; which u provide at %, because that u have empty space on the end of the page, solution:
.activites {
width: 100%;
display: flex;
}
.colonnesimple {
width: 25%;
}
.colonnedouble {
width: 25%;
flex-direction: column;
}
.colonnesimple img {
object-fit: cover;
height: 90%;
width: 100%;
border-radius: 16px 16px 0 0;
}
.colonnedouble img {
object-fit: cover;
height: 80%;
width: 100%;
border-radius: 16px 16px 0 0;
}
.activites .colonnesimple figure {
width: calc(100% / 1.2);
height: 257px;
margin-left: 25px;
margin-right: 40px;
box-shadow: 0px 0px 10px #55555538;
border-radius: 16px 16px 16px 16px;
cursor: pointer;
}
.activites .colonnedouble figure {
width: calc(100% / 1.2);
height: 120px;
margin-left: 30px;
margin-right: 40px;
box-shadow: 0px 0px 10px #55555538;
border-radius: 16px 16px 16px 16px;
cursor: pointer;
}
.activites .colonnesimple figure figcaption {
padding: 10px;
position: relative;
}
.activites .colonnedouble figure figcaption {
padding: 10px;
position: relative;
}<section id="activitesmarseille">
<div class="contenuactivites">
<h5>Activités à Marseille</h5>
<div class="activites">
<div class="colonnesimple">
<figure><a href="#">
<img class="imagesolo" src="https://www.imgacademy.com/sites/default/files/2009-stadium-about.jpg" alt="Image du Vieux Port">
<figcaption>
<h6>Vieux Port</h6>
</figcaption>
</a>
</figure>
</div>
<div class="colonnedouble">
<figure><a href="#">
<img class="imagedoublegrd" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSe6kwbxkuKpLxeNP_O6LGoJxIkuhatjNvZ0gPcRr4DpziONgkIsqNOl09dfZduQJHH_6k&usqp=CAU" alt="Image du Fort de Pomègues">
<figcaption>
<h6>Fort de Pomègues</h6>
</figcaption>
</a>
</figure>
<figure><a href="#">
<img class="imagedoublept" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTRnsZZ1ZwCEhb4spOX3eIMeN3KbwZaAJo6mypioWrvsaNPfb5TFNu8kjrtEvrADqvoRdA&usqp=CAU" alt="Image des îles du Frioul">
<figcaption>
<h6>îles du Frioul</h6>
</figcaption>
</a>
</figure>
</div>
<div class="colonnesimple">
<figure><a href="#">
<img class="imagesolo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT2qwQpNH5dPV0dLoPl7InPlMPUf0eWWMG4POrt56FeF62yCUZA-qVBMKb3UDi6I2lj30k&usqp=CAU" alt="Image du Parc National des Calanques">
<figcaption>
<h6>Parc National des Calanques</h6>
</figcaption>
</a>
</figure>
</div>
<div class="colonnedouble">
<figure><a href="#">
<img class="imagedoublept" src="https://www.imgacademy.com/sites/default/files/styles/scale_2500w/public/2017-03/Campus Center.jpg?itok=Bs2r8s-1" alt="Image de Notre-Dame-de-la-Garde">
<figcaption>
<h6>Notre-Dame-de-la-Garde</h6>
</figcaption>
</a>
</figure>
<figure><a href="#">
<img class="imagedoublegrd" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTGOfJEHAIvVjPI8TXLLrMgwXWZiPx0FkU3dBiBExfIDy-ISANxSh2ulIvA9f86y_yu-sU&usqp=CAU" alt="Image du Parc LongChamp">
<figcaption>
<h6>Parc LongChamp</h6>
</figcaption>
</a>
</figure>
</div>
</div>
</div>
</section>CodePudding user response：
If you encounter more problems like this I advice to use the inspector (CTRL SHIFT C) of your browser and simply hover over the problem to see where the problem may be. In this case probably a height value that is too high.