[Resolved] How to remove right sidebar from the Homepage?

[Charbel]

Hello @David and @Leo,

Hope you are doing well.

I want to make a slight design change for my website by removing the right sidebar from the homepage only.

And then expand the WP Show Posts from 2 columns to 3 columns instead. Expanding the columns for WP Show Posts is easy, I will increase to 3.
But I want to confirm with you first before make these changes.

Website: https://charbelnemnom.com/ page 2 https://charbelnemnom.com/page/2/ and so on.

However, I want to keep the right sidebar for the posts (articles).

In summary, I am trying to adopt this site design (Homepage): https://adamtheautomator.com/

Your help is highly appreciated.

Many Thanks!

[David]

Hi there,

regarding the WPSP columns, that is correct !

To remove the Sidebar just on the Front page ( and the Paginated pages ):

1. Create a new Layout Element:

https://docs.generatepress.com/article/layout-element-overview/

2. In the element set the Sidebars to content no sidebar.

3. Set the Display Rules > Location to Front Page

[Charbel]

Thank you @David, much appreciated!

It works as expected beautifully except one thing (WP Show Posts).

I expanded the WPSP columns to 3, I can see a third column now but it’s empty with no article.

I did not clear the cache, so you won’t see it from your side yet.

Any idea?

Thank You!

[David]

Edit the WPSP list, on the Posts tab set the number of posts you want displayed.

[Charbel]

Thank you @David,

I increased the Posts per page for the WPSP list as shown below from 15 posts per page to 20, but still not working.

The article is not coming to the third column as shown below.

The number of articles per page is increased but not aligning 3 articles (vertical) and then one below (horizontal).

I am not sure if there is any CSS code that was added previously who is limiting the display of articles to 2 columns only.
Any idea?

[David]

You will need to remove this CSS you have in Customizer > Additional CSS

.wp-show-posts-single:nth-child(3n) {
    width: 100%
}

.wp-show-posts-single:nth-child(3n) .wp-show-posts-inner {
    display: flex
}

.wp-show-posts-single:nth-child(3n) .wp-show-posts-image {
    margin-bottom: 0
}

.wp-show-posts-single:nth-child(3n) .wp-show-posts-inner :last-child {
    height: 100%
}

That forces every 3rd post to fill 100% width which is why if occupies its own row and leaves a space before it.

[Charbel]

Hello @David,

Yes, I was suspecting a CSS code was added by Codeable team during the design phase.

It I remove the code you mentioned below, I am loosing the horizontal article. In other words, I need 3 articles vertical and 1 horizontal, then 3 vertical and 1 horizontal, and so on…

.wp-show-posts-single:nth-child(3n) {
    width: 100%
}

.wp-show-posts-single:nth-child(3n) .wp-show-posts-inner {
    display: flex
}

.wp-show-posts-single:nth-child(3n) .wp-show-posts-image {
    margin-bottom: 0
}

.wp-show-posts-single:nth-child(3n) .wp-show-posts-inner :last-child {
    height: 100%
}

What I should update in the CSS code?

Thank You!

[David]

In that CSS – change All instances of 3n to 4n

[Charbel]

Thank you @David,

I updated all instances from 3n to 4n.

Here is a screenshot before the changes:

After changes:

The issue now with the 4th article in the horizontal line, the image becomes small instead of splitting the image and text as before with 3n.

Any idea?

Thank You @David!

[Charbel]

I solved it. I updated this code as well from 3n to 4n.

    .wpsp-align .wp-show-posts-inner>div,
	.wp-show-posts-single:nth-child(4n) .wp-show-posts-inner>div {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

Many Thanks!

[David]

Glad to hear you found the solution!

[Charbel]

Many Thanks @David!

Always happy working with you.

[Charbel]

Hello @David and @Leo,

Hope you are doing well.

I need to come back to this topic, please.

After I updated to GP Premium: 2.2.0 and the theme to V3.2.0.

I have noticed that the third column on the right side (vertical) is not showing anymore on my home page.
As you can see, I have 3 articles vertical and 1 horizontal, then 3 vertical and 1 horizontal, and so on…

I am still using the same CSS settings that are shared here.

https://charbelnemnom.com/
https://charbelnemnom.com/page/2/

Please check the screenshot below:

Could you please advise?

Thank You!
-Charbel

[David]

Hi there,

you have Exoic code being injected into the post list – see here:

https://www.screencast.com/t/ReD6Fx5jc

And that will mess up the nth-child ordering.

In your CSS you can try changing all instances of nth-child to nth-of-type that may fix it.
Or alternatively you need to stop injecting the ezoic code in that list.

[Charbel]

Thank you @David for finding the root cause!

Yes, it looks like that Ezoic code is being injected into the post list.
This was not the case last week. It seems they have added something.

I will try to change all CSS from nth-child to nth-of-type and see if it works before I contact Ezoic.

Many Thanks, @David!

[Author]

Posts