Posted 8 months ago #
I use infinite scroll to load extra posts when user scrolls down (instead of clicking next page). However my posts are displayed in columns next to eachother and when infinite scroll loads the next results there are displayed below eachother, you can see it here:
http://www.kledingfreak.nl/category/damesmode/
Does anyone know how to solve this?
Posted 8 months ago #
The elements in columns are so because they're in a different HTML structure and have CSS applied to them.
Each correctly positioned column has this HTML structure:
<div id="cms-column">
<article id="post-5243" class="post-5243 post type-post status-publish format-standard hentry category-damesmode category-tunieken">
<header class="entry-header">
<div class="comments-link">
</div>
</header><!-- .entry-header -->
<div class="entry-content">
<div style="background-color:#F2F2F2; width: 170px; height: 300px;float: left;">
<center>
<a href="http://www.kledingfreak.nl/damesmode/D39ccb2398b3ca8778b9b10e12cbf793f/"><img src="http://www.fashionfactor.nl/images/P/IMG_0247.jpg" style="max-height: 160px; max-width: 160px"></a><br>
<strong>ALYNA</strong><br>
<span style="white-space: nowrap;">Jersey Poncho</span><br>
<a href="http://ds1.nl/c/?wi=173273&si=2686&li=1114132&dl=product.php%3Fproductid%3D16437&ws=">Nu kopen</a><br>
€49.95<br>
<a href="http://www.kledingfreak.nl/damesmode/D39ccb2398b3ca8778b9b10e12cbf793f/">Details</a>
</center></div>
</div><!-- .entry-content -->
<footer class="entry-meta">
</footer><!-- #entry-meta -->
</article><!-- #post-5243 -->
</div>Each incorrectly positioned column has this HTML structure
<article id="post-5237" class="post-5237 post type-post status-publish format-standard hentry category-damesmode category-jurken category-jurken-jurken">
<header class="entry-header">
<div class="comments-link">
</div>
</header><!-- .entry-header -->
<div class="entry-content">
<div style="background-color:#F2F2F2; width: 170px; height: 300px;float: left;" id="cms-column">
<center>
<a href="http://www.kledingfreak.nl/damesmode/Da20fe51d23de4175c9ded8d91ab2ae67/"><img src="http://www.fashionfactor.nl/images/W/IMG_7278.jpg" style="max-height: 160px; max-width: 160px"></a><br>
<strong>ALYNA</strong><br>
<span style="white-space: nowrap;">Dress to Kill </span><br>
<a href="http://ds1.nl/c/?wi=173273&si=2686&li=1114132&dl=product.php%3Fproductid%3D16431&ws=">Nu kopen</a><br>
€89.95<br>
<a href="http://www.kledingfreak.nl/damesmode/Da20fe51d23de4175c9ded8d91ab2ae67/">Details</a>
</center></div>
</div><!-- .entry-content -->
<footer class="entry-meta">
</footer><!-- #entry-meta -->
</article>So it just looks like you're missing a containing HTML element <div id="cms-column"> that should wrap around each item.
Posted 8 months ago #
Thanks so this problem is fixed now... I should have placed the div somewhere else because it was not taking after loading next posts.
However if you now look at:
http://www.kledingfreak.nl/category/herenmode/overhemden/
You will see that the first row is not displayed nicely... anyone know why?
Posted 8 months ago #
I don't know what you mean, "not displaying nicely".
Can you specify how it should look? Perhaps involve imagery if it's complicated to explain.
Posted 8 months ago #
I fixed the problem... my childthem css was not overriding the parent theme for some reason... Thank you for your help
You must log in to post.
