How can I align my blog posts?

Support
#1

Hi guys,

On my blog page (and my category pages), I have 6 blog posts (two rows of 3.

However, if the excerpts are different between 2 posts (e.g one is 4 lines and one is 5 lines) then the row below looks unaligned. This makes the blog look dodgy and super ugly.

Is there any code I could enter to make sure that all 6 boxes (2 rows) are nicely aligned with one another? rather than certain boxes being offset?

wordpress details are in a secure note.

Many thanks!

#2

Hi there,

Please also provide us with the link to your site so that we can check it.

Thank you.

#3

website is in secure note. Thanks!

#4

Hi There,

Thank you for the URL. Please choose standard on BLOG and Archive layout instead:

Hope this helps.

#5

That has nothing do with what I asked, I’m afraid. This just makes each blog post huge.

I still want my blog posts to be in rows/columns, but I want them to be properly aligned, whereas at the moment they’re disaligned.

How can I make my posts align properly? Help is appreciated, thanks.

#6

Hi,

To align it, you can add the code below in X>Launch>Options>CSS

.blog .entry-content.excerpt p {
    min-height: 180px;
}

.blog .entry-title {
    min-height: 100px;
}

You may change the min height to adjust the alignment.

Hope that helps.

#7

Hi,

This hasn’t fixed it.

Cheers

#8

Hi again,

Try adding the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

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

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

#9

No luck, still disaligned. Sometimes it’s one post out of line, sometimes it’s two.

This looks ridiculously ugly and unprofessional lol - any ideas?

Thanks

#10

Hi there,

Since the images are loaded last or delayed, the render script calculated the wrong positioning. Please replace that javascript code with this

jQuery('img').load( function() { jQuery(window).resize(); } );

Thanks!

#11

It’s finally sorted!

Thanks very much guys, all sorted now.

Much appreciated!

#12

Oh no, another issue!

My home page (latest blog posts) is perfectly aligned now

but once I go into a category page, they are slightly disaligned.

Any help?

Thanks

#13

Hi There,

Please provide us the direct link of the category page that having the issue. I cant see the issue anywhere on the category page that is on your menu.

Thanks,

#14

added to secure note.

thanks

#15

Hi there,

It’s perfectly aligned, maybe it’s your browser cache. Please clear your browser cache too.

Thanks!

#16

No luck. It’s like the CSS code I entered has only applied to my blog page and not my category pages. My category pages are disaligned.

#17

Hi there,

Would you mind providing a screenshot and point out the alignment? Or are you referring to alignment caused by long titles? Because it’s the only misalignment that I’m seeing on my end, and it’s because the text is longer. And compared to the blog page, it has no item that has a long title.

Thanks!

#18

Please find 2 screenshots below. The top is my blog page (aligned) and the bottom is my category page (disaligned).

On my homepage, if the post title is long, the images remain aligned and the text moves up. On the category pages, however, if the title is long, it remains in place and pushes everything else down.

Thanks!

#19

Hi there,

That’s what I thought :slight_smile:

It’s only normal since you have a long title. The initial issue is about the spaces appearing above or below the items and it’s fixed by adding the code above. And it’s perfectly working.

The solution now will be adding a long title in all of your items, or adding a short title.

Thanks!

#20

I don’t understand what you mean?

On my homepage, the images always align, regardless of whether I have a long or short title. The title adjusts it’s position - the images always remain aligned.

There must be a way to apply these same rules on my category pages, no?

I shouldn’t have to go out of my way to use a long or short title in order for my page to look neat.

Any help is appreciated.