[Support request] Container Full-Width Isn’t Working

[Ravi Dixit]

Hello, GeneratePress team!

When I am choosing full-width by going to Layout>Content Container (see this https://prnt.sc/vdlwsh) this is not working. Instead, it is hurting the default layout also. See this image https://prnt.sc/vdluwt

The default layout of a post is https://prnt.sc/vdlvgi

I have added a code to minimize the post container width to 800px, I guess that is causing the issue.

Here is the code that I am using

.single .inside-article, .comments-area {
    max-width: 800px;
    margin: 0 auto;
	  box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.13);
}

.inside-article {
    border-radius: 10px;
}

But I want to keep the default single post container as it is 800px. But full-width should work as it should be.

Please help with this issue

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[Ravi Dixit]

I have shared the URL of the site in the private fields.

Please check

[David]

Hi there,

you can’t have a full width container and then use CSS to limit it to 800px wide.
What exactly are you trying to fix / achieve?

[Ravi Dixit]

I want to design a post with the Elementor but when making it full-width, it is not working!

Even when I am choosing Elementor Full Width template.

[David]

Thats because of this CSS:

.single .inside-article, .comments-area {
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.13);
}

You’re setting the content max-width: 800px;
That will need to be removed for the page to be displayed full width.

[Ravi Dixit]

Okay, I already know this…

Is there any other way I can keep the single post container width same as it is now… And make the full-width work like normal.

Please let me know

[David]

Sorry i am confused. How can it be displayed at 800px and be full width at the same time ?

Are you wanting to make Elementor content stretch the width of the 800px container ie. no padding ?

[Ravi Dixit]

Sorry for the confusion…

I want the normal posts which set to default in Layout>Container to have the 800px…

And when I choose the full-width in Layout>Container it should have full width.

[David]

Change your CSS to:

.single:not(.full-width-content) .inside-article, .single:not(.full-width-content) .comments-area {
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.13);
}

body:not(.full-width-content) .inside-article {
    border-radius: 10px;
}

[Ravi Dixit]

Thanks, David!

It worked as I expected, Thanks for your help.

I don’t want to work this particular CSS code when I choose Full-Width

body:not(.full-width-content) .inside-article {
    border-radius: 10px;
}

And also I want to remove the author meta from the full-width template. like by Ravi Dixit

[Leo]

I don’t want to work this particular CSS code when I choose Full-Width

That should already be the case as the selector includes :not(.full-width-content)

Can you link me to the specific page in question?

[Ravi Dixit]

Okay! I got it!

But how can I remove author name from the full-width pages completely?

[Ravi Dixit]

Hello, David!

The code you provided above is working excellent but all the comment area is also full-width now, which is good.

But the items added in the bottom of the pages like Facebook section, comment box, author bio etc also stretched. I don’t want this…

I want them to look normal as on other pages… But the page should be full-width, is there any way?

We can also make the comment area 800px(like other pages) and make the background white if there is no other way, but it should be on the full-width pages only, should not affect other pages.

[David]

Where can i see a Post with the Full width option enabled ?

[Author]

Posts