Blog sidebar rendering at the bottom of my blog

New Contributor

On my blog listing page, the sidebar is rendering at the bottom of the page instead of the right side. How can I fix this?

Reply
0 Upvotes
2 Replies
HubSpot Moderator

The sidebar rendering at the bottom of a blog is generally a symptom of having an unclosed <div> tag in your blog template markup. The most common cause results from if you have an opening or closing <div> within an if statement in your Blog Content module markup.

 

To resolve:

 

Navigate in HubSpot to your blog template and ensure that all of your <div> are evenly wrapped inside or outside of if statements.


Incorrect example, where the sidebar would show below the blog, if the blog author is not defined:

 

<div>
{% if content.blog_post_author %}
</div>
{% endif %}


Correct example, where the div would only render if the author was defined:

{% if content.blog_post_author %}
<div>
</div>
{% endif %}

 

If you are still seeing an issue, make sure that there are the same number of opening and closing <div> tags in the markup.

 

Finally, if you are using a truncate filter to limit the number of characters that render in a listing post content, you should instead use a truncatehtml filter to ensure that all tags are closed out: https://designers.hubspot.com/docs/hubl/hubl-supported-filters#truncatehtml

Occasional Contributor

This could also have to do with the main content or sidebar being set too wide so it breaks the grid. 

 

Any chance you could post a link to the page in question so I can have a closer look? 

Reply
0 Upvotes