Reducing Width of Pages on Blog

61 0 8

Hi there, 

I am hoping that someone will be able to help me with a small tweak I want to make to our blog pages. 

Currently, I find that the page is way too wide and the text looks minimal and makes it harder to read. 

Is there a way to reduce the page width?

What section would I do this within? 

Hope someone can help!

Thanks :)



61 0 8

Image showing the width that I would like - 


You could add this to the very bottom of your styles.scss.liquid (under assets) in your theme files which will limit the width to a maximum of 780px, feel free to adjust that number to make it smaller, but I think thats close to what you want.

.content-blog {
    max-width: 780px;


61 0 8

This doesn't work for me - I used this on the theme-styles.css.liquid file

I first tried just adding it to .content-blog and nothing happened so added it to .template-blog 

Still no luck - here is where I added the code... it seems like the right place so not sure if it's something else which is not playing with it:

/* blog page */
.template-article .sidebar,
.template-blog .sidebar { margin-top: 7px; }
.template-blog { max-width: 800px; }
.content-blog ul { padding: 0; list-style: none; }
.content-blog .list-blog > li:first-child {padding-top:0; margin-top: 0; border-top: none;}
.content-blog .list-blog > li { border-top: 1px solid #d0d0d0; padding-top: 36px; margin-top: 33px;}
.content-blog .list-blog h3 { font-size: 20px; font-weight:700; margin-bottom:10px; }
.content-blog .list-blog .des p { margin-bottom: 19px; }
.content-blog .list-blog .des p img { margin-bottom: 5px; }
.content-blog .list-blog .des blockquote {margin-bottom: 36px;}
.content-blog .list-blog .button { margin:0 0 20px; }
.content-blog .list-blog .button a { border: 1px solid transparent; padding:0 15px; height:36px; line-height:36px; display:inline-block; text-transform: uppercase; font-weight:700; font-size: 11px!important; }
.content-blog .list-blog .button a:hover { text-decoration: none; }
.content-blog { max-width: 800px; }
.blog_author { font-style: italic; color:#848484; margin-bottom:25px; } 
.blog_author a { color:#848484; }
.blog_author .separator { padding: 0 3px; }
.user-tags { display: inline; padding: 0; margin:0; }
.user-tags li {display: inline; font-style: italic; }
.user-tags li span { padding: 0 5px; text-transform: uppercase; }
.user-tags li label { text-transform: uppercase; text-decoration: underline; margin-right: 2px; }
.user-tags li label span { padding: 0; }
.user-tags li a { color: #2d2d2d; text-decoration: none; }
.user-tags li a:hover { color: #848484; border-bottom: 1px solid #848484; }

.blog-detail .page-header { margin-bottom:10px; }
.blog-detail .page-header h1 { text-transform: none; }
.blog-detail img {margin-bottom: 15px;}
.blog-detail .rte  { margin-bottom: 20px; }
.blog-detail .addthis  { clear: both; padding: 22px 0;}
.blog-detail .action-btn  { clear: both; padding-bottom: 40px;}
.blog-detail .action-btn .right { float:right; }
.blog-detail #comments  {clear: both; padding-bottom: 20px;}
.blog-detail #comments ul  {list-style: none; padding-left: 0; }
#comments ul li  {padding-left: 120px;background:url(i-comment.jpg) 0 6px no-repeat; padding-bottom: 73px; margin:0; }


61 0 8

Yeah... don't add it to .template-blog as it reduces the entire content of the page (including headers and nav menus) to 800px - Oops! 

Still haven't figured this out, so any help would be appreciated :)

New Member
6 0 0

Did anyone ever figure this out?  Seems like a good question, given that current blog styles are definitely narrower than the preset.  

Adding the suggested code at the end of my theme.scss.liquid asset did nothing, and neither did it work at the end of the blog section of that code.  I'm wondering if something somewhere is set to "auto" and thereby overriding it.  But I'm not a coder.  I've no idea.

Working with Debut theme here.  Any ideas?

New Member
1 0 0

Don't add it at the very bottom of the SCSS file, but just bellow the blog style (Ctlr+F of Cmd+F nad type Blog) look for the :

.postContent {

and put just :

max-width: 960px;

change the 960px if you want to :) 

New Member
1 0 2

Just found on my own how to change the blog content width.

I Know it's like 4 years later but it always can be useful.

change blog content width .jpg

You have to add :
max-width: 700px;
Under the margin top. You can change the 700px in what you prefere.
Have a nice day.
New Member
1 0 0


Can you please explain the steps to reduce the page width on only say, My Blog page...

While the remaining pages elsewhere, all others may remain at normal page width?


I am having trouble locating the exact steps.


Thank you,