Docs

[Rex R]

My main archive page loads my posts with huge gaps between each row. If I adjust my browser width then the posts that are visible flow correctly. It started doing this about 6 months ago, I don’t remember exactly. I see it in Mozilla, Chrome, and on my phone. Even in single column portrait on my phone, I see big gaps from post to post. Everything is up to date, and I use Icon stack.

Main archive page – https://hopefaithprayer.com/
On this page the gaps build as the page progresses – https://hopefaithprayer.com/category/gods-word/confessions/

Thanks so much.

[Thai]

Hi There,

Please add the following code under Customizer > Custom > Edit Global Javascript:

jQuery( function($) {
	$(window).resize();
});

Let us know how it goes!

[Rex R]

Sorry, it changes it from this http://screencast.com/t/7wIA5GSLl6UI to this http://screencast.com/t/hxZDsLkxKl . It is still essentially the same. Again, up until about 6 or 8 months ago it did not do this? Is there a change in how a page is rendered?

Is there a certain default spacing that is used to set the page and once the page is resized it goes away and they all collapse to a much smaller desired spacing – http://screencast.com/t/YV5gGrryfOSD ? The gap between the first and second row seem to follow this – http://screencast.com/t/W9K5YZHH but not the third and fourth – http://screencast.com/t/wbRsE159 .

I have a rather extensive Global CSS code in Customizer. That had grown over thme but that has not changed in a very long time. See attached if you desire. Thank you.

[Rue Nel]

Hello There,

Thanks for the updates! I noticed that you are using CloudFlare. You need to login to your CloudFlare account and you must purge your site cache. If you may have installed a caching plugin, please clear your caching plugin first before testing your site so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Please let us know how it goes.

[Rex R]

I do it all the time. Done. Still, it does not work correctly. It never used to do this. I have made no changes. Something in an update has caused this. This does not help.

This is a category archive page and for some reason, it is less affected – https://hopefaithprayer.com/category/gods-word/scriptures/

[Rue Nel]

Hello Again,

Could you please update the code and use this;

jQuery( function($) {
  $(window).resize();

  $(window).load(function() {
	$(window).resize();
  });
});

You must clear all your caches before testing your site. It would also be a good idea to turn off the caching plugin and cloudflare so that we can find where the issue came from.

Please let us know how it goes.

[Rex R]

Still no change…

[Nico]

Hi There,

Thanks for updating us.

Would you mind sharing us your admin credentials so we could check your setup closer.

Don’t forget to set it as private reply.

Thanks.

[Rex R]

This reply has been marked as private.

[Jack]

Hi there Rex R,

Thanks for writing back, I’ve checked your install and everything looks fine, nothing’s out of place and there’s no code that should be causing this.

I’ve then checked on the front-end of the site in both Chrome and Firefox and the gaps don’t show for me (screenshots attached). I see a small gap, which is the standard padding between posts.

Archive-2.jpg, has a gap which is because there’s room for one more post within the layout, so that’s as expected on that section. 🙂

Can you let me know what browser versions you are testing on and if you have any browser add-ons activated?

Thank you!

[Rex R]

I am still getting the gaps in IE, Chrome, Mozilla, and on my Android machines. I don’t usually get it on archive items that are visible like this http://screencast.com/t/axdTc4Jd but the ones further down get it like this http://screencast.com/t/Pr71Ughmn . If is even slightly adjust the window width it goes away for the visible ones, like this http://screencast.com/t/YfnF507D00ad, but the ones further down still have the gap. In Apple machines, depending on what method is used to change the window size they either correct and won’t.

I don’t have screenshots but it is also bad on Android on the small screens. If you flip the phone to landscape many will flow back together but down lower they are still wide.

It seems better on archive category pages like this http://screencast.com/t/opqjIJSp and especially if the posts do not have a Featured Image. Could the image size be affecting the layout? My images are all different sizes. They automatically resize to fill the width. Thanks, Rex

[Rad]

Hi Rex,

That means the re-render functionality that is bind on resize() event isn’t triggering when switching orientation. Would you mind adding this code to Admin > Appearance > Customizer > Custom > Global Javascript

jQuery ( function($) {

window.addEventListener("orientationchange", function() {
	$(window).trigger('resize');
}, false);

} );

Then please check it again, thanks!

[Rex R]

No, it is not just on resizing. When the page renders the first time, there are BIG horizontal gaps. Especially for those regions that are off the screen and not scrolled to yet. When you resize the post sections resize (usually) for all posts that have a portion on the active viewing area. The ones outside of the viewing area will still have wide gaps.

To me it looks like the page is not rendering properly initially. It used to, and on one of the updates it started doing what it is doing. Rex

[Rad]

Hi Rex,

I mean, it has to resize to trigger rendering. Not saying it’s not working on resize 🙂

Rendering is triggered on load and on resize, but since the on load isn’t working, the next option is to trigger the resize. That’s just my guess as I can’t reproduce these issues on my browsers.

Let’s try this code,

jQuery ( function($) {

function trigger_resize() {

setTimeout ( function() { //Let's make sure rendering is only retriggered after other code binding
$(window).trigger('resize');
}, 300 );

}

$(window).load( trigger_resize );
$(document).ready ( trigger_resize );

} );

Hope that helps 🙂

[Rex R]

I am so sorry but it does nothing. I am trying to understand why it does not happen on your browser. What could be different? It happens on all my browsers, my phone, my tablet, and the computers on two other individuals at different addresses. This happens all the time – http://screencast.com/t/c8fqWBjEspi

This is my Custom Global CSS. Does anything seem funky in it?

.entry-title:before { content: “” !important; }

.x-navbar .x-brand {
float: none;
display: block;
margin: 20px auto;
width: 80%;
}

.x-navbar .x-nav {
float: none;
display: table;
margin: 0 auto;
}

.x-navbar-static-active .x-navbar .x-nav > li,
.x-navbar-fixed-top-active .x-navbar .x-nav > li {
height: 50px;
}

.x-navbar .x-btn-navbar {
float: none;
width:50px;
margin: 0px auto;
}

@media (max-width: 979px) {
.x-nav-collapse.collapse {
display: block !important;
}
}

.x-nav-collapse .x-nav > li {
float: left;
padding-top: 5px !important;
}

.x-navbar .x-navbar-inner .x-nav-collapse .x-nav > li > a {
border: 1px solid transparent !important;
padding: 0.875em 1.25em 0.825em !important;
font-size: inherit !important;
border-radius: 100em !important;
}

.x-navbar .x-navbar-inner .x-nav-collapse .x-nav > li > a:hover {
border-color: #dfdfdf !important;
border-color: rgba (0, 0, 0, 0.075) !important;
background-color: transparent !important;
}

.x-navbar .x-btn-navbar {
display: none !important;
}

}
@media (max-width: 480px) {
.x-navbar .x-brand {
width: 98%;
}

.x-nav-collapse .x-nav > li {
float: none !important;
padding-top: 5px !important;
}

}

@media (max-width: 524px) {
.x-navbar .x-navbar-inner .x-nav-collapse .x-nav > li > a {
font-size:0.9em!important;
}

}
@media (max-width: 480px) {
.x-navbar-static-active .x-navbar .x-nav > li, .x-navbar-fixed-top-active .x-navbar .x-nav

> li {
float:left!important;
}
.x-navbar .x-navbar-inner .x-nav-collapse .x-nav > li > a {
font-size:0.8em!important;
}

}
@media (max-width: 438px) {
.x-navbar .x-navbar-inner .x-nav-collapse .x-nav > li > a {
font-size:0.6em!important;
}

}

.entry-wrap {
padding:25px 0px 50px;
}

.entry-featured a:before {
content:””;
background-color:transparent;
}
.entry-featured a:hover img {
opacity:.4;
}

.format-standard .entry-title:before {
content: “”;
}

/* To crop thumbnails in blog index page */
@media (min-width: 120px) {
.archive .blog .entry-thumb {
max-height: 350px;
overflow: hidden;
}
.blog .entry-title {
min-height: 60px;
}

/* To show thumbnails in index view for pages */
.archive .page .entry-featured {
display:block;
}

/* Do not show featured image in pages */
.page .entry-featured {
display: none;
}

/* Do not show featured image in posts */
.single .entry-featured {
display: none;
}

}

/* Correction to show NavBar because of update v3.1.1 */
@media (max-width: 979px){
.x-nav-wrap.desktop {
display:block !important;
}

.x-navbar .x-btn-navbar {
display:none !important;
}

.x-navbar .mobile .x-nav li>a {
font-size:12pt;
font-weight:900;
}
}

Thanks. Rex

[Author]

Posts