How can I alter the width of a blog post in Debut theme?

Store Design
1

Hi, I am currently using the Debut theme on my store and would like to change the width of my blog posts as the content is too wide and difficult to read.

Does anyone know how to do this and where to go to insert the code to change it?

Any help is much appreciated, thank you so much!

https://styledmockups.com/blogs/news/how-to-use-psd-mockups

2

Hi

add code assets/theme.scss.liquid bottom of the file

.page-width {max-width: 1900px !important; padding-left: 0px !important; padding-right: 0px !important;}

Hope this will work for you.

Thanks!

1 Like
3

Hey!

thanks a lot for your kind reply but it didn’t worked.

Shouldn’t I add the code with something like: .blog-template?

instead of .page-width?

Because this will affect all the website, and I’d like to change the blog template width…?

I try to understand a bit the logic of the code!
Thank you!

Vanesa

4

Hi

add code assets/theme.scss.liquid bottom of the file

.template-article .page-width {max-width: 1900px !important; padding-left: 0px !important; padding-right: 0px !important;}

This code will affect on article pages only .
Hope this will work for you.

Thanks!

1 Like
5

Yeyyy!!!

now it’s working!!

But it changed the width in all gadgets.. (when you see website from phone, for example)

I would like to keep this width size only when you navigate from computers.

I was searching in the code and I think maybe I should add something like this:

or not?

@include media-query($medium) {…

But I don’t know what Shopify code considers as small, medium or large… are the devices from which you browse the web? or is it something else?

Thanks for your help, I hope I’m not being a pain!

:wink:

Vanesa

6

Hi

add code assets/theme.scss.liquid bottom of the file

please remove old css class and add this class in your css file

.template-article .page-width {max-width: 900px !important; padding-left: 0px; padding-right: 0px;}

/* This media for mobile device */

@media only screen and (max-width: 749px) {
.template-article .page-width {padding-left: 22px !important;padding-right: 22px !important;width: auto !important;}
}

Hope this will work for you.

Thanks!

3 Likes
7

Hey!

Now it’s working beautiful!

thank you soo much!

You are the best!!

:slight_smile:

Vanesa

1 Like
8

Hi

Please do like as solution. That will cost of our time :slight_smile:

Thanks!

1 Like
9

Hi there i just added this code and its change the body for me, however it has also narrowed the header aswell? I want the main header to stay the same like on all the other pages. Can you please help? Thanks.

10

Hi, I am having the same problem on my blog (text too wide for mobile, images fine) and the above code didn’t work when I added it to the code at the bottom of the article (not well practiced in adding code). I am using the beyond theme - can anyone advise please? Thanks