Remove Sidebar Colorlib Sparkling WordPress Flat Design Theme

I’ve searched around on this forum quite extensively, and I can’t seem to find an answer to this.

I’d like to remove the sidebar from my front page (with posts). Right now I’m using a dynamic page that pulls in my recent blog posts, which is something I want on my front page. Creating a static page doesn’t allow me to see my recent blog posts. Any advice? I’m capable of modifying CSS/PHP etc. Just point me in the right direction ;).

Edit: I’d also like the posts to expand to the full width (col-12).

Thanks in advance! Love the theme.

if you want to change layout width only for homepage while leaving sidebar in place for post pages and other pages as well then you can use this code.

.home .main-content-inner {
    width: 100%;

.home #secondary {
    display: none;

It will get rid of sidebar on home page and make page full width.

However, if you want to use featured images and still make them scale on top of the entire post width which is now going to be much wider then you need to change featured image size via functions.php

Currently featured images are defined like this:

add_image_size( 'sparkling-featured', 750, 410, true );

But you need to change it to something like

add_image_size( 'sparkling-featured', 1140, 410, true );

(adjust height to get the aspect ratio your are looking for)

Now you will have to use regenerate thumbnails plugins for images that are already uploaded on your website as WordPress doesn’t regenerate them automatically once changed. You can use this plugin for that.

This is fantastic! Thank you so much for the great response :D. The CSS and function modification worked perfectly.

One more quick question. If I wanted to make the post frame width not be 100% (as it doesn’t look great being that wide), how would I center it? Just removing the sidebar while not changing the width keeps the frames right aligned.

Thanks again Aigars!

Then you can try it like this:

#secondary {
    display: none;
@media (min-width: 1024px) {
    .main-content-area {
        margin: 40px 21%;

I am not sure if it is properly centered as I didn’t measure it but changing percent value is there to tweak it properly.

I have a similar issue. I want sidebar to be removed from my single product page only.
using the below i got rid of the sidebar but the page is not full width, Sidebar are still exists.
single-product .site-content {
width: 100%;
.single-product #secondary {
display: none;

my demo site:

Could you please help me to resolve this issue?


This thread is over one year old and information might be outdated. Please start your own support thread and we will help you from there.

Sorry for inconvenience.