Front page misalignment

Man I’m sorry that issue came back. The layout was supposed to be more reliable with this update. I still can’t recreate the gap between the posts which is making it hard for me to provide an adequate solution.

If you want to keep 5 on the left, and then 5 on the right, the following CSS should do that:

.excerpt-1,
.excerpt-2,
.excerpt-3,
.excerpt-4,
.excerpt-5 {
  float: left !important;
}
.excerpt-6,
.excerpt-7,
.excerpt-8,
.excerpt-9,
.excerpt-10 {
  float: right !important;
}

Could you let me know what version of Chrome you’re using too?

The CSS didn’t work, unfortunately.

In Linux, I use Firefox 41.01 and Chrome 45.0.2454.101

In Windows, I have Firefox 39.0, Chrome 45.0.2454.101, and Opera 32.0

The problem persists in every OS and browser. It’s strange that it’s not showing for you. Maybe clear your cache?

I just realised how patronising that must be to you. ?? Sorry.

Lol it’s cool ??

I’ve been testing the site via browserstack, and I was able to recreate the issue with Firefox 39.0 and Windows 8.1, but only once. The time when the gaps did show, I scrolled down the page quickly before everything was done loading.

Does that make any difference when you visit your site? If you scroll down immediately versus waiting until it is fully loaded?

Also, do you have the lazy loading feature active in the Additional Options section in the Customizer?

It makes no difference if I wait for the site to fully load before scrolling. I disabled lazy loading now and the problem is still there.

I am using Windows 8.1 and Mint 17.2, if that helps any.

I’m pretty much stumped on this. Not being able to recreate the issue has made it really tough to debug.

This is kind of a shot in the dark, but could you try activating this plugin on your site: https://www.ads-software.com/plugins/use-google-libraries/

That will run a newer version of the Javascript Jquery library on your site. I’m hoping that there is a bug fix of some sort in a newer version that might correct the behavior you’re seeing.

Sorry, Ben, I thought I had replied to this.

The Google Library plugin did nothing.

Yesterday, I played with the widget area I’ve inserted above the navigation menus, and the problem suddenly resolved itself. It was fixed for a day.

But the gaps returned again just a few hours ago. I’ve noticed something that may help to track the problem down: the gaps appear below posts which have featured images. (I’m not sure if this was always the case. I’ll keep an eye out.)

I’ll see if removing custom CSS that targets that element or the excerpts fixes anything.

I’ll keep you updated.

*The culprit is not my custom widget area. The problem appeared even before that, and a fresh/base theme still has the problem.

Try adding this CSS temporarily:

.excerpt .featured-image {
  height: 250px !important;
  padding-bottom: 0 !important;
}

That’s going to force the featured images on the blog to have a height of 250px. By defining it explicitly like that, it might help the browser know exactly how much space to give it and fix the gap issue.

Changing other CSS doesn’t seem to help, but that worked, yep. Interestingly, changing the value to 300px reintroduces the problem.

Thanks!

That’s very interesting. Can you try this CSS:

.excerpt .featured-image {
  min-height: 250px !important;
}

This might actually work as a solution. This CSS won’t explicitly set the height, which makes the image stretch at different screen sizes. This code will only make sure the image has a minimum height of 250px, which should often be less than the real height, thus making no visual impact.

I’m thinking that by setting the minimum height, the browser will have something to work with instead of acting like the featured images don’t exist.

I was too quick to mark this as resolved. The problem has returned. It doesn’t matter which of the above CSS I use, it’s still there. This is so weird.

The gaps seems to happen exclusively in the left column, but as a result of posts in either column not lining up exactly. And it’s not just under the posts with featured images now. (Again, I’ve tried different CSS, all with the same result.)

Some screenshots again:

https://pla.za.com/wp-content/uploads/2015/10/Screenshot-from-2015-10-15-194643.png

https://pla.za.com/wp-content/uploads/2015/10/Screenshot-from-2015-10-15-194651.png

https://pla.za.com/wp-content/uploads/2015/10/Screenshot-from-2015-10-15-194701.png

There appears to be no rhyme or reason as to when the gaps start to happen, just under what conditions the posts will misalign if they do decide to start doing so, but they do sometimes vanish when I fiddle enough with the site (but even that isn’t reliable).

Anyway, don’t get too hung up about this if I’m the only one with the problem. I’ll find someone to tinker with the site.

That is so strange. I’m out of ideas right now, but I will continue looking into it.