Remove sidebar in blog

Hi,

First of all, Illdy is a great theme I really enjoy working with it.

My only concern so far is that I would like to remove/hide the right sidebar in the Blog layour? Is that possible?

Best,
Tim

Hello,

Please use this CSS solution to make the blog page full-width and hide the sidebar:

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

Let me know if I got it alright.

Regards

Additional to remove the posts sidebar:

.single .col-sm-4{
display: none !important;
}
.single  .col-sm-7{
width: 100% !important;
}

Hej,

Just like above described I am also trying to remove the sidebar. I have copied the above code, but unfortunately no luck and the sidebar is still there :frowning:

Thanks for great theme! :wink:

Best wishes, Kristina

Hello Kristina,

Can you provide the website link so I can have a live preview of why the above code is not working?

Regards

I’m having the same problem as everyone else. I can’t seem to get the sidebar to go away, I attempted to paste the CSS code in that you gave me, but it’s possible I did it wrong. Where does it need to go exactly? Also, the website I’m working on is www.choosercs.com, the sidebar is on the “About”, “Contact”, and “Gallery” pages.

Hello,

It seems to me that you only need to choose the No Sidebar page template in the right Page Attribute panel, but it seems like you already got the pages fullwidth.

Regards

Hey Ion,
Choosing the No Sidebar in the page attribute panel worked. I saw your response to someone else on the forum to do that, thank you for the help!

That’s great news, I’m happy you got this fixed! Regards

Hi, I’m also trying to play with sidebar a little, because I’m not really satisfied with % width of sidebar and text area. I’ve used following code:

@media only screen and (min-width: 1200px){
	.col-sm-4 {
    		width: 25%;
	}
	.col-sm-7 {
    		width: 70%;
	}
}

But after using it I noticed, that it’s changing whole page structure, not just blog layout.
I also tried to use
.page-template-blog .col-sm-4{
as you written above, but seems like this bunch of code isn’t affecting page at all.
Is there a way how to tune up these columns only for blog pages? Also is there a way how to remove sidebar for all pages (type page), while keeping it for all blog articles? Choosing the no-sidebar template works fine, but it gets really overwhelming when creating and managing numerous pages.

Thanks!

EDIT: I also tried

@media only screen and (min-width: 1200px){
	.blog .col-sm-4,
	.archive .col-sm-4{
    		width: 25%;
	}
	.blog .col-sm-7,
	.archive .col-sm-7{
    		width: 70%;
	}
}

as written in https://colorlibsupport.com/t/how-do-make-my-blog-full-width/ without further success. Any help would be appreciated :slight_smile:

Hello,

The above code should work alright to take care of the article listing, but due to the media query this will only kick in on screens smaller than 1200px.

Try this code:

.page .col-sm-4,
.single .col-sm-4,
.archive .col-sm-4{
    width: 25% !important;
}
.page .col-sm-7,
.single .col-sm-7,
.archive .col-sm-7{
    width: 70% !important;
}

If nothing seems to be working, please leave the code on the website and provide me live preview so I can look after the malfunction.

Regards

Oh well, that works!
Sidebar is now repositioned as I wanted, but this reposition caused search widget to behave weirdly - check figure. Is there any way how to fix this issue? I’m putting used code below as well as link to the page live preview. Also, is there a way how to rename/translate this search widget into my language?
Thanks for the help!

Live preview: http://toptennis.sk/blog/

Code used:

@media only screen and (min-width: 768px) and (max-width: 991px){
	.page .col-sm-4,
	.single .col-sm-4,
	.archive .col-sm-4{
    		width: 33.333333%;
	}
	.page .col-sm-7,
	.single .col-sm-7,
	.archive .col-sm-7{
    		width: 65%;
	}
}

@media only screen and (min-width: 992px) and (max-width: 1199px){
	.page .col-sm-4,
	.single .col-sm-4,
	.archive .col-sm-4{
    		width: 27%;
	}
	.page .col-sm-7,
	.single .col-sm-7,
	.archive .col-sm-7{
    		width: 65%;
	}
}

@media only screen and (min-width: 1200px){
	.page .col-sm-4,
	.single .col-sm-4,
	.archive .col-sm-4{
    		width: 25% !important;
	}

	.page .col-sm-7,
	.single .col-sm-7,
	.archive .col-sm-7{
		width: 70% !important;
	}
}

EDIT:
Well, as I noticed, line .page .col-sm-7, affected all the pages, but front-page aswell, and that’s the problem I was trying to fix. Is there any way how to create exception, that front-page cols would stay untouched?
Thanks! Have a great day

Hello,

Try using the default values with the home selector for the classes:

.home .col-lg-4 {
    width: 33.33333333%;
}
.home .col-lg-7 {
    width: 58.33333333%;
}

Try this for the search fix:

.widget .search-form .search-form-box #s {
    font-size: 15px;
}

Cheers

Hello, thanks for the code!

I’m not exactly sure, why did you use .col-lg-, because it only affected skills in about section. I modified your code with .col-sm-, which then applied for the whole front page. Screens with lower resolutions than 768px weren’t affected, actually code made it much worse, so I used media queries to limit the code for higher resolutions. I’m sharing the code if someone would cope with similar issue:

@media only screen and (min-width: 768px){
	.home .col-sm-4{
		width: 33.33333333% !important;
	}

	.home .col-sm-7{
		width: 58.33333333% !important;
	}
}

Code for search widget worked fine, you really rock!
Thanks for the help, have a great day!

It might have been some slip off by my side, sorry for the confusion.

I’m very glad we got so far with the setup, hopefully this is finished now :slight_smile:

Hi,

after the latest updates the code

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

is not working anymore.
After having read this post I have added

.single .col-sm-4{
display: none !important;
}
.single  .col-sm-7{
width: 100% !important;
}

but still the page is not full-width in my opinion. http://www.paoloscotti.net/prova/
Any idea on who to solve this issue?

Hi Svanzy,

As I can see from live website the page is full width, could you point me out where is the problem?

Thank you,

Cristian

Hi Cristian,

this is a test page http://www.paoloscotti.net/test-page/ and as you can see the widht of the “text area” (same text in both samples) is much wider than the blog’s one.

I use the website only for pictures, the same gallery would place the pictures in row of 4 in the pages and in row of only 2 pictures in the blog entries. How can I solve this?
Thank you