Help with blog template

SOLVE
georgenichols
Member

Hi there, 

 

Our blog listing page: 

https://blog.innerdrive.co.uk/

 

About half way down, once you get past the listings with pictures and on to the listings that are smaller and more block like links they start to fall out of line: 

screenshot.jpg

 

Changing it through through the template is a little above my ability because all of the boxes are one module and I'm not proficient enough in HTML to have a crack at it. To be honest what would be most ideal for us would be for it all to look like this section of the page with the picture and the text: 

 

print screen 2.jpg

 

If anyone can help me with this I'd really appreciate it, 

 

thanks,

George 

0 Upvotes
1 Accepted solution

Accepted Solutions
tjoyce
Solution
Recognized Expert | Platinum Partner

@georgenichols

The problem is that some of the titles are 2 lines and some of the content bodies are 1 -3 lines long so some boxes are shorter than others. You can either set a fixed height for the boxes with:

.post-item {height:250px;}

OR put a clearing row every other post item

OR drop this jquery somewhere in the page (it will find the tallest item and set the rest of them to that height):

$(function(){
    var tallest = 0;
    $('.post-item').each(function(){
foundThem = true; if($(this).outerHeight() > tallest){ tallest = $(this).outerHeight(); } }); $('.post-item').css({'height': (tallest+10)+'px'}); });

tim@belch.io

View solution in original post

1 Reply 1
tjoyce
Solution
Recognized Expert | Platinum Partner

@georgenichols

The problem is that some of the titles are 2 lines and some of the content bodies are 1 -3 lines long so some boxes are shorter than others. You can either set a fixed height for the boxes with:

.post-item {height:250px;}

OR put a clearing row every other post item

OR drop this jquery somewhere in the page (it will find the tallest item and set the rest of them to that height):

$(function(){
    var tallest = 0;
    $('.post-item').each(function(){
foundThem = true; if($(this).outerHeight() > tallest){ tallest = $(this).outerHeight(); } }); $('.post-item').css({'height': (tallest+10)+'px'}); });

tim@belch.io

View solution in original post