WordPress.org

Ready to get started?Download WordPress

Forums

Problem with infinite scroll, not displayed nicely (5 posts)

  1. Jan1979
    Blocked
    Posted 1 year 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?

  2. Andrew
    Forum Moderator
    Posted 1 year 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.

  3. Jan1979
    Blocked
    Posted 1 year 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?

  4. Andrew
    Forum Moderator
    Posted 1 year 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.

  5. Jan1979
    Blocked
    Posted 1 year ago #

    I fixed the problem... my childthem css was not overriding the parent theme for some reason... Thank you for your help

Topic Closed

This topic has been closed to new replies.

About this Topic