Change Blog Width

Highlighted
New Member
8 0 0

I would like to change the width of our blog posts similar to a few other recent posts on the boards here, BUT I have a different theme. Could anyone help me out on what code to insert and where (and if I need to delete any other code)? 

 

Your help is greatly appreciated! 

 

https://bubbasfoods.com/blogs/news/bubba-s-bananas-grow-filipino-small-farming-communities as an example post

 

Thanks!

Garrett

0 Likes
Highlighted

Hello ,

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

@media only screen and(min-width:769px){
.large--two-thirds {
    width: 90% !important;
}
push--large--one-sixth {
    left: 5% !important;
}
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
8 0 0

Thanks! It looks like that worked, but there are two new issues that popup that happen on account of this code... 

  1. The blog isn't centered. Can I do that? 
  2. It also affects the main blog page (https://bubbasfoods.com/blogs/news) as well as the blog posts. Is there anyway to have the smaller size to occur on just the blog posts? This probably isn't a big deal, but I think centering the blogs is the most important. 

Thanks for your help. I'm happy to mark you answer as a solution if we can get this item adjusted. I appreciate your help! 

 

Garrett

0 Likes
Highlighted
New Member
4 0 0

Try this:

@media only screen and(min-width:769px){
  #shopify-section-article-template .large--two-thirds {
    width: 90% !important;
  }
  #shopify-section-article-template push--large--one-sixth {
    left: 5% !important;
  }
}
0 Likes