CMS Development

georgenichols
Membre

Help with blog template

Résolue

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 Votes
1 Solution acceptée
tjoyce
Solution
Expert reconnu | Partenaire solutions Elite
Expert reconnu | Partenaire solutions Elite

Help with blog template

Résolue

@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

Voir la solution dans l'envoi d'origine

1 Réponse
tjoyce
Solution
Expert reconnu | Partenaire solutions Elite
Expert reconnu | Partenaire solutions Elite

Help with blog template

Résolue

@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