Creating a Dual-Column Blog Layout in HubSpot

Other Questions HubSpot
1

Hey everyone! I’m trying to set up a two-column format for my blog on HubSpot. Their default is just one column, and I’m having trouble figuring out how to make it wrap after 5 posts.

I’ve been working with the Blog Content module and tweaked the Listing Template code. I set the posts per page to 10 in the blog settings. I also added some inline styling to make the first column take up half the width:

max-width: 50%; height: auto;

But I can’t figure out how to make posts 6-10 show up in a second column. I’ve looked everywhere for help, but nothing seems to address this specific issue.

I’m okay with editing HTML and CSS, but anything beyond that is a bit out of my league. If there’s a JavaScript solution, I could probably add it to a file, but that’s about it.

Has anyone dealt with this before? Any tips or tricks would be super helpful! Thanks in advance for any advice you can give me on this HubSpot puzzle.

2

I’ve been in your shoes, evelynh. Here’s a trick that worked wonders for me:

Instead of fiddling with inline styles, create a custom CSS class for your blog container. Something like:

.two-column-blog {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.two-column-blog .post-item {
  width: 48%;
  margin-bottom: 20px;
}

This naturally creates a two-column layout. To limit it to 10 posts, you can use a bit of jQuery (if you’re comfortable with it):

$(document).ready(function() {
  $('.two-column-blog .post-item:gt(9)').remove();
});

Just make sure to apply the ‘two-column-blog’ class to your blog container in the HubSpot template. This approach gives you more control and is easier to maintain in the long run. Let me know if you need any clarification!

3

hey evelynh, try css grid: set container to display: grid; grid-template-columns: repeat(2, 1fr); then limit posts using js:

document.querySelectorAll('.post-item').forEach((p,i) => { if(i >= 10) p.style.display = 'none'; });

this gives a 2-column layout for 10 posts.

4

I’ve tackled this issue in HubSpot before. One effective approach is to use CSS Grid combined with some JavaScript. Here’s what I’d suggest:

First, wrap your blog posts in a container and apply this CSS:

.blog-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

This creates a two-column layout automatically. Then, use JavaScript to limit the posts:

document.addEventListener('DOMContentLoaded', function() {
  const posts = document.querySelectorAll('.post-item');
  posts.forEach((post, index) => {
    if (index >= 10) post.remove();
  });
});

This removes any posts beyond the first 10. Remember to adjust your HubSpot template to accommodate these changes. It might require some trial and error, but this method should give you the layout you’re after without overly complex coding.

5

hey there! i’ve done something similar before. try using flexbox in your CSS. set the container to display: flex; flex-wrap: wrap; and give each post flex: 0 0 50%;. that should make them line up in two columns. might need to tweak widths a bit. good luck!

6

I’ve faced this exact challenge with HubSpot blogs before. Here’s what worked for me:

Instead of messing with inline styles, I created a custom module for the blog listing. In the module, I used CSS Grid to achieve the two-column layout. It’s more flexible than Flexbox for this specific use case.

Here’s a snippet of the CSS I used:

.blog-listing-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.post-item {
  width: 100%;
}

This automatically creates two equal columns and wraps the posts. No need to worry about specific post numbers.

For the JavaScript part, I added a simple script to limit the displayed posts to 10:

const posts = document.querySelectorAll('.post-item');
posts.forEach((post, index) => {
  if (index >= 10) post.style.display = 'none';
});

Hope this helps solve your layout puzzle!