'Why doesn't my fourth grid element display well?
I'm using a WordPress theme which is using bootstrap 3.4.1.
I have an issue with a grid, the fourth element is displayed in place of where the hypothetical 6th element should be. Here's a snippet taken from my code, yet I couldn't make it appear like it is on my website. https://codepen.io/pierrick-pi-gallagher/pen/poWyvpY
Here you can see what I'm talking about.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="adforest_res">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="posts-masonry">
<div class="col-md-4 col-lg-4 col-sm-6 col-xs-12" id="holder-806">
<div class="white category-grid-box-1">
<div class="image">
<div style="position: absolute; top: 38px; left: 0px;background-color: black;color: white;z-index: 1000;padding: 5px;">Recherche</div>
<div class="ribbon status_active" id="status-dyn-806">Actif</div>
<a href="https://www.hoppyconnect.com/ad/blonde-de-soif-bec-permanent-6-mois/"><img src="https://www.hoppyconnect.com/wp-content/uploads/2021/12/logo-konrad-carre-80x80.png" alt="Blonde de soif – bec permanent – 6 mois" style="width: 40%;left: 30%;margin-top: 18% !important;margin-bottom: 17%;" class="img-responsive"></a>
</div>
<a href="https://www.hoppyconnect.com/ad/blonde-de-soif-bec-permanent-6-mois/">
<div class="short-description-1 text-center">
<div class="category-title" style="font-size: 14px !important;font-weight:300;color: black !important">Contrats permanents</div>
<h2 class="text-center" style="font-size: 14px !important;font-weight:300;color: black !important">Blonde</h2>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-left" style="font-size: 14px !important;font-weight:300;color: black !important">
Non renseigné
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-right" style="font-size: 14px !important;font-weight:300;color: black !important">
6 mois min</div>
</div>
<span class="ad-price" style="text-align: center !important;float:none;font-size: 14px !important;font-weight:300;color: black !important">2,40 €/L HTDI</span>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-lg-4 col-sm-6 col-xs-12" id="holder-757">
<div class="white category-grid-box-1">
<div class="image">
<div style="position: absolute; top: 38px; left: 0px;background-color: black;color: white;z-index: 1000;padding: 5px;">Recherche</div>
<div class="ribbon status_active" id="status-dyn-757">Actif</div><a href="https://www.hoppyconnect.com/ad/d-check-offre-contrat-permanent-1-biere/"><img src="https://www.hoppyconnect.com/wp-content/uploads/2021/12/logo-konrad-carre-80x80.png" alt="D-CHECK – Offre > Contrat permanent > 1 bière" style="width: 40%;left: 30%;margin-top: 18% !important;margin-bottom: 17%;" class="img-responsive"></a></div>
<a href="https://www.hoppyconnect.com/ad/d-check-offre-contrat-permanent-1-biere/">
<div class="short-description-1 text-center">
<div class="category-title" style="font-size: 14px !important;font-weight:300;color: black !important">Contrats permanents</div>
<h2 class="text-center" style="font-size: 14px !important;font-weight:300;color: black !important">Double IPA</h2>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-left" style="font-size: 14px !important;font-weight:300;color: black !important">
Non renseigné
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-right" style="font-size: 14px !important;font-weight:300;color: black !important">
12 mois min</div>
</div>
<span class="ad-price" style="text-align: center !important;float:none;font-size: 14px !important;font-weight:300;color: black !important">2,30 €/L HTDI</span>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-lg-4 col-sm-6 col-xs-12" id="holder-710">
<div class="white category-grid-box-1">
<div class="image">
<div style="position: absolute; top: 38px; left: 0px;background-color: black;color: white;z-index: 1000;padding: 5px;">Recherche</div>
<div class="ribbon status_active" id="status-dyn-710">Actif</div>
<a href="https://www.hoppyconnect.com/ad/test-bec-permanent-1-biere/"><img src="https://www.hoppyconnect.com/wp-content/uploads/2021/11/shutterstock_402621667-1-2-313x234.jpg" alt="(Test) bec permanent 1 bière" class="img-responsive"></a>
</div>
<a href="https://www.hoppyconnect.com/ad/test-bec-permanent-1-biere/">
<div class="short-description-1 text-center">
<div class="category-title" style="font-size: 14px !important;font-weight:300;color: black !important">Contrats permanents</div>
<h2 class="text-center" style="font-size: 14px !important;font-weight:300;color: black !important">Ambrée</h2>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-left" style="font-size: 14px !important;font-weight:300;color: black !important">
Non renseigné
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-right" style="font-size: 14px !important;font-weight:300;color: black !important">
12 mois min</div>
</div>
<span class="ad-price" style="text-align: center !important;float:none;font-size: 14px !important;font-weight:300;color: black !important">1,11 €/L HTDI</span>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-lg-4 col-sm-6 col-xs-12" id="holder-707">
<div class="white category-grid-box-1">
<div class="image">
<div style="position: absolute; top: 38px; left: 0px;background-color: black;color: white;z-index: 1000;padding: 5px;">Recherche</div>
<div class="ribbon status_active" id="status-dyn-707">Actif</div>
<a href="https://www.hoppyconnect.com/ad/bec-blonde-6-mois-dengagement-mini/"><img src="https://www.hoppyconnect.com/wp-content/uploads/2021/11/shutterstock_402621667-1-1-313x234.jpg" alt="Bec blonde – 6 mois d’engagement mini" class="img-responsive"></a>
</div>
<a href="https://www.hoppyconnect.com/ad/bec-blonde-6-mois-dengagement-mini/">
<div class="short-description-1 text-center">
<div class="category-title" style="font-size: 14px !important;font-weight:300;color: black !important">Contrats permanents</div>
<h2 class="text-center" style="font-size: 14px !important;font-weight:300;color: black !important">Barley wine</h2>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-left" style="font-size: 14px !important;font-weight:300;color: black !important">
Non renseigné
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-right" style="font-size: 14px !important;font-weight:300;color: black !important">
12 mois min</div>
</div>
<span class="ad-price" style="text-align: center !important;float:none;font-size: 14px !important;font-weight:300;color: black !important">12,00 €/L HTDI</span>
</div>
</a>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="col-md-12 col-xs-12 col-sm-12"></div>
</div>
</div>
</div>I don't understand since it's perfectly working on another page of my website with the same code.
I can't give link on my website since it is on coming soon mode.
Solution 1:[1]
Sorry to tell you what but the theme you're using is really badly written, there is more than 14k lines of CSS with multiple typos like on line 4970 position: realtive;.
There is no use of CSS grid but 192 uses of position: absolute; and 273 uses of !important.
In the HTML part there is class applied on div that aren't in the CSS like posts-masonry.
In every items on your "grid" there is this style directly applied on the HTML:
position: absolute;
left: Xpx;
top: Xpx;
it looks like these values have been applied by javascript.
To conclude, we won't be able to help fix this grid issue since the best way would be to re-write the grid system entirely.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Ben Souchet |