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

IssaW
Tourist
4 0 1

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.

 

 

Replies 10 (10)

Zqdo
Shopify Partner
803 32 63

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

banned
IssaW
Tourist
4 0 1

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
Shopify Partner
803 32 63

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

banned
IssaW
Tourist
4 0 1

Yes, just the width of the article content. 

Zqdo
Shopify Partner
803 32 63

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?

banned

AliReviews
Shopify Partner
773 90 355

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.

- Was my answer helpful? Please hit Like or Mark it as solution!
- Ali Reviews - The must-have Shopify app that empowers you to effortlessly collect, display, and manage product reviews.
- Start your FREE trial today!
IssaW
Tourist
4 0 1

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

ZestardTech
Shopify Expert
5429 978 1303

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;
};

ZestardTech_0-1687325370544.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

PageFly-Richard
Shopify Partner
4272 969 1620

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

palma__sol
Tourist
5 0 0

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?