How to create full width blog posts in Supply theme?

Hi,

I’d like to make all of my blog posts pages full width. I have removed the blogs sidebar. Using Supply theme.
Screenshot below.

Thank you :slightly_smiling_face:

@Chirpy - can you please share this page link? It will need css

@suyash1

https://www.shop.themagpiewhisperer.com

@Chirpy - whats the password to view page?

@suyash1

$queaky

@Chirpy - please add this css to the very end of your theme.scss file and check

@media only screen and (min-width: 769px){
.wrapper {max-width: 100%;}
.wrapper .grid .grid-item {width: 100%;}
}
1 Like

@suyash1

I just tried that and it made the whole site go full width, where as I just want the blog pages to work full width?

@Chirpy oh sorry my bad please add this , it will add for article blog posts only

@media only screen and (min-width: 769px){
.template-article .wrapper {max-width: 100%;}
.template-article .wrapper .grid .grid-item {width: 100%;}
}
1 Like

@suyash1
Actually, never mind! I think I prefer the whole site full width anyway :slightly_smiling_face: If I change my mind I will change it to your last solution.

Thank you! :slightly_smiling_face:

1 Like

@Chirpy - sure, do letme know if you need anything else, you have my email below.

1 Like

@suyash1

Hi again! I am using the code below you gave me. My ‘blog featured images’ are WAY too big. Is there a code to incorporate into this so I can get the featured images to display at smaller size?

Thank you

@media only screen and (min-width: 769px){
.template-article .wrapper {max-width: 100%;}
.template-article .wrapper .grid .grid-item {width: 100%;}
}

@Chirpy - what is the password to view site?

@suyu $queaky1981

@Chirpy - can you please also share the page link where you have this big image?

@suyash1

https://www.shop.themagpiewhisperer.com/blogs/news

I don’t want the featured blog images taking up so much space.

@Chirpy - please add this css and check , adjust numbers as per the need

@media screen and (min-width:990px){
.template-blog .lazyload__image-wrapper img {max-width:70%; width: 70%;}
}

@suyash1 that did the trick! BUT… now there is lots of white space underneath the images?

@Chirpy - it should not happen but not sure why is it like that, image is set to absolute hence this issue, if we change it then it will create mess