How can I increase the blog content width in Craft theme?

[IssaW]

I'd like to increase the width of my blog article content on Craft theme. I have tried following some other directions but can't quite make it work. 

Here's one of my blog articles for example: https://idylissa.com/blogs/blog/9-butterfly-facts-magic-in-your-garden

I'd like to change the width on all blog articles. I do not want to change the width of the title or the featured image.

Thanks for any suggestions.

[Zqdo]

You'll have to make some changes in your code files. How comfortable are you with writing code on your store?

[IssaW]

I don't write any code, but I am comfortable following directions and reverting everything if it doesn't work out. 😉 Although I don't usually tend to make changes that are too complicated - usually just sticking in a few lines here or there.

[Zqdo]

What width are you trying to increase? Just the width of the words?

[IssaW]

Yes, just the width of the article content. 

[Zqdo]

Ok. In your base.css file, try this code:

#bloggy--article{
width: 1000px;
}

@media screen and (min-width: 990px){
.page-width--narrow {
    max-width: 100rem;
    padding: 0;
}
}

Does this work?

[AliReviews]

Hello @IssaW ,

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code 

Go to Assets folder -> base.css file -> add this following code at the bottom of page

.blog-content-container {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

Save changes

Hope this can help. Let us know if you need any further support.

Ali Reviews team.

[IssaW]

Hey there, thanks for helping out. I added that code, and it doesn't seem to make any changes.

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

.page-width--narrow {
max-width: 130rem;
}
div#bloggy--article {
max-width: 130rem;
};

[PageFly-Richard]

Hi @IssaW 

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Base.css

.article-template__hero-container {
    max-width: 100% !important;
}
.page-width--narrow {
    max-width: 100% !important;
}
#bloggy--article {
    max-width: 100% !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
}

Hope you find my answer helpful!

Best regards,

Richard | PageFly

[palma__sol]

This worked for me! I have the rest of my site wider using: @media(min-width:1024px){.page-width{max-width:90% !important}}

and below I used your code to only target my blog to be more narrow at 60%!

But question, I noticed it edits it in mobile too which I don't like, how do I keep the wide on mobile but more narrow on web?