Fixing Min-Width of Blog Posts

What’s the best way to adjust the width of a blog post? At the moment, our blog post template has a pretty narrow width, making it difficult to place images next to text when needed. Ideally the width should be the same width as the nav bar on top of it or somehwere inbetween that and where it is now.


Blog Post Width Too Narrow
Here is the section I’m working with in the drag and drop editor for context:


Hubspot Drag and Drop Template Context
I was trying to adjust the max width of the blog post column by altering the CSS but broke everything and had to revert back to what we had originally.
I tried adding the css styling to
.page-center
.body-container-wrapper

.content-wrapper

.blog-content

with the tag
min-width: 500px; (and other varying px sizes and percentages)

But was unable to get the look/feel I was looking for. Does anyone have any tips for this other than trial and error? Thanks for your time!

Hi there,

If you go to your CSS file and use Ctrl + F, you should find the following code:

.hs-blog-post .content-wrapper > .row-fluid-wrapper{
 max-width: 600px; 
 margin: 0 auto;
}

That max-width of 600px is what’s making it narrow. Removing it (or commenting it out) will set the width to the next biggest container (the max-width of 800px under “.container-fluid .row-fluid .page-center”):

I hope that helps!


Stephanie O’Gay Garcia
HubSpot Design / Development / Automation

Website | Contact

Thanks so much for your help! This worked perfectly :slightly_smiling_face: