Here's my problem if I don't use a <br>
after <hr>
my image goes away like this:
So I added the <br>
, and now I have this result:
I used some margin to reduce the size of the blank space, but I'd like to be close such as this result I designed:
Here's my HTML code:
.articleactu {
grid-column: 1 / -1;
grid-gap: 36px;
display: grid;
grid-template-columns: 190px auto;
flex-direction: column;
}
.articleactu img {
border-radius: 15px;
max-width: 200px;
}
p {
word-wrap: break-word;
max-width: 650px;
}
p1 {
line-height: 30px;
font-weight: bold;
}
p2 {
font-size: 14px;
font-weight: bold;
color: #662189;
}
hr.solid {
margin-top: -10px;
width: 480%;
opacity: 12%;
}
<img src="images/vanguard.jpeg" alt="Article GTA " class="center">
<div>
<p1>CALL OF DUTY : VANGUARD : Est-il bon ?</p1>
<p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
<p2> Publié le 25 novembre 2021 </p2>
</div>
<hr class="solid">
<br>
<img src="images/marvel.jpg" alt="Article GTA " class="center">
<div>
<p1>MARVEL AVENGERS : Le personnage de Spider-Man bientôt dans le jeu.</p1>
<p> Les fans demandent, Square Enix donne. En effet, Spider-Man sera bientôt jouable dans le jeu sortit il y a peu via DLC...</p>
<p2> Publié le 25 novembre 2021 </p2>
</div>
Thanks in advance for your help !