topic Re: Hubspot Blog List Page in CMS Development

Hubspot Blog List Page

Jessica123 — Wed, 12 Sep 2018 09:39:10 GMT

We have set up a blog on Hubspot which is great but on the blog list page each blog post is a different size. Is there html code or any way to ensure they stay evenly sized?

Re: Hubspot Blog List Page

Yoshi — Wed, 12 Sep 2018 09:41:03 GMT

Hey @Jessica123!

May I know what is different exactly?

If you could provide me with the URL, I would be happy to look into it!

Re: Hubspot Blog List Page

Jessica123 — Wed, 12 Sep 2018 09:43:04 GMT

Thanks for getting back to me. The link is: https://blog.payslip.com/

As you can see the boxes the blogs are in are different sizes.

Re: Hubspot Blog List Page

Yoshi — Wed, 12 Sep 2018 09:48:53 GMT

Hey @Jessica123

If you can check out the attached below, you can target ".blog-listing-wrapper .post-listing .post-item>.post-item-inner" and set the fixed height.

height

This way, you can set the fixed height for each post item.

Typically, we recommend our customer to use same image size for all the blog post featured image. This way, it will look more consistent.

Re: Hubspot Blog List Page

tjoyce — Wed, 12 Sep 2018 11:46:31 GMT

Hi @Jessica123, drop this code somewhere in your page, it will find the tallest container and make the rest just as tall.

<script>
jQuery(function(){
    var tallest = 0;
    if(jQuery('.post-item-inner').length > 0){
        jQuery('.post-item-inner').each(function(){
            if(jQuery(this).outerHeight() > tallest){ tallest = jQuery(this).outerHeight(); }
        });

        jQuery('.post-item-inner').css({'height': (tallest+10)+'px'});
    }
});
</script>

If this answer helped, please, mark as solved 😄

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.