How do Make my blog full width?

Illdy
1

I want to remove the right sidebar from my blog and make it full width. How do I go about doing that?

2

Hello,

Please use this CSS code to make the blog fullwidth:

.page-template-blog .col-sm-4{
display: none;
}
.page-template-blog .col-sm-7{
width: 100%;
}

This might come with some malfunctions, please let me know if everything is working as expected.

Regards

3

Thanks for the help. I am super new to all of this.
Do i need to edit my .php files or does that simply go in edit CSS portion?

Thanks

4

Hello,

This code should be placed in a child’s theme stylesheet.css, ideally.
But you can use a Custom CSS plugin or place it inside Dashboard > Appearances > Editor > Style.css but keep in mind that this will get erased if you update the theme.

Regards

5

Hi I tried to put that code in the Style.Css but no success.

Could you please make a clear tutorial to remove the sidebar and make post full width?

My website is: marineroudie.com

I noticed that question comes back really often, a easy step-by-step tutorial would be really handy!

Thank you very much

M

6

Hello Marter,

Try this new CSS, it seems it needs some modifications.

As far as I tested this should work for blog, archive and post pages.

.blog .col-sm-4,
.single-post .col-sm-4,
.archive .col-sm-4{
display: none;
}
.blog .col-sm-7,
.single-post .col-sm-7,
.archive .col-sm-7{
width: 100%;
}

Regards

7

Hi Ion,

This didn’t work and now I lost my Services and About widgets.
Also, I have noticed, once I am inside a Portfolio project, the menu drop-down doesn’t work anymore.

This theme is getting quite complex to customise and I consider changing it. All I wanted is for my work to take full width when inside one of my projects and add an easy way to navigate from one project to another without going back to the home page.

Thanks for your assistance.

8

HI Ion,

I faced the same problem too. I would like to remove the right sidebar from every page I create. The script you gave, to which I should paste it (without making new css file)?

Thanks.

9

@marter The purpose of the code is to hide the sidebar and make the content full-width for all the blog pages, so I’m not really sure what services and about widgets you lost and if that’s normal.

There’s another option to remove the sidebar for pages, in the right Page Attributes Panel where you can choose a no sidebar page template.

@winnerjames The code should be placed in a child’s theme stylesheet.css, ideally.
But you can use a plugin like Simple Custom CSS or place it directly in Dashboard > Appearances > Editor > Style.css but keep in mind that this will get erased if you replace/update the theme files.

10

Ion,

I tried paste this code in Dashboard > Appearances > Editor > Style.css but nothing happened. Stay the same, the sidebar still there.

Is there any other way to get rid this sidebar?

James

11

Hi, I have the same problem. Using that css code in my Illdy child theme (or the original one, it’s the same) will not hide the sidebar :frowning:

12

Can you please both provide me the website link to have a look for myself?

I have tested the above code myself and managed to force the sidebar to hide on blog page, posts and category.

Sorry for the trouble!

13

My website: www.kanguruid.com

Look at the pages like About Us and News. The sidebar’s still sitting there.

14

The above code is dedicated to the blog page, single post and archive listing.

I see that your news page is going for the full width content, while for the About page you need to set up a No Sidebar page template in the right Page Attributes panel when you edit it in Dashboard > Pages.

Let me know if you got it alright.

15

Cool! It works, Ion! Thanks for your help. I don’t know the settings should be that easy.

16

That’s great, should’ve thought to point there faster.

17

Ok perfect it worked for mee too! Thanks for your help!

18

Awesome :smiley: