[Support request] Full width page size

[Guido]

Hi guys,

I am enjoying the GP premium very much. I have build the following site with it and there is just one thing I don’t get. Could you please help me with this?

I am attempting to make a full width page. It successfully worked on https://prostudy.nl/ . So that is good.

However, I want all pages to be full width. I have created an element to go full width as suggested here (https://docs.generatepress.com/article/layout-element-overview/) but is does not have the result I am looking for. For the explanation of my issue, I have saved this element as a concept so it is not active now

If you visit https://prostudy.nl/bijles/ you will see the larger picture is not full width. And the second part is less wide than the rest of the page, and also not full width. How do I adjust this to full width? Or to the same size as the rest of the page?

Same issue on the https://prostudy.nl/tarieven/ page. Here is the top picture full width but the rest of the page is not.
And here https://prostudy.nl/over-ons/ the top picture and the action part are full width but the other parts are not.

Could you explain to me where to change all these parts to full page with? And is there a possibility to change it all at one time? So I do not have to adjust every single page?

Thank you in advance!

[Elvin]

Hi,

However, I want all pages to be full width. I have created an element to go full width as suggested here (https://docs.generatepress.com/article/layout-element-overview/) but is does not have the result I am looking for. For the explanation of my issue, I have saved this element as a concept so it is not active now

Can you explain a bit more on what results you have in mind? The theme, by default, sets max-width to the content. Layout Element is the way to go to remove this max-width.

If you visit https://prostudy.nl/bijles/ you will see the larger picture is not full width. And the second part is less wide than the rest of the page, and also not full width. How do I adjust this to full width? Or to the same size as the rest of the page?

I’ve checked the contents of your site. I see you’re using Genesis Blocks plugin.

I’m not exactly sure how it works but since you’re setting max-width within its column, consider changing the body’s background color to white so you don’t see the gray spaces on the left and right side.

Or apply this CSS to force the main wrapper to go full width without affecting the contained content for the footer and header:

.entry-content {
    margin-left: calc(-100vw / 2 + 100% / 2);
    margin-right: calc(-100vw / 2 + 100% / 2);
    max-width: 100vw;
    width: auto;
    background-color: white;
}

the white background is added so you don’t see the gray spaces on the left and the right side.

[Guido]

Hi Elvin,

Thank you for your quick response.

I have added the CSS you suggested. It is active so you can check it. Now the background in every page is white and all parts in all pages seem to be full width. However, it does not have the desired outcome.

I have this page https://prostudy.nl/tarieven/ . If you follow this link, you will see that the header of the page is full width. The picture of the two guys full width, and the text ‘ De tarieven van .. ” is still in the center. This is good, this is the way I like it. I wish every part of the page was as wide is this header.

What I am looking for is a way to make every part of every page full width. Now, on https://prostudy.nl/tarieven/ , the header is but the other parts are not. For example, how do I make the yellow part at the bottom to be full width? Or why is the header on https://prostudy.nl/huiswerkbegeleiding/ not full width? While the header on https://prostudy.nl/tarieven/ is full width. It does not work with the suggested CSS.

How do I make every part of every page full width?

I hope this makes it more clear.

Thank you for your help in advance!

Kind regards,

Guido

[Guido]

Hi,

I have some good news. I know how to fix the issue by hand for a single block. Do you have a suggestion on how to change this on every page at once?

I have done the following: https://ibb.co/F64Kkqw

Click on a block, click on the icon en do full width (“volledige breedte in Dutch). It changes the width to full width which as exactly what I wanted. It is fixed now on a few pages on my site.

However, I want to change it to every single page on my website. Is there an option on how to do this? Or do I have to go by every block and change it by hand. Can’t imagine that would be the case.

Thank you for your help in advance.

Kind regards

[Tom]

Hi there,

Using the Align Full option like that will work, but it shouldn’t be necessary if you set the Content to Full Width.

For example, this page: https://prostudy.nl/tarieven/

It’s not set to display at Full Width using our Layout Element: https://docs.generatepress.com/article/layout-element-overview/

If it was, you wouldn’t need to use the Align Full block option to force it to go full width.

[Guido]

Hi Tom,

Thank you for your response. I have added a Layout Element with the following settings:

Sidebar: Content (no sidebars)
Footer: default
Content: Full width (no padding)
Display rules:
– Location: Entire site
– Exclude: nothing
– Users: all users

Is this the right way to set up full width pages for the entire site?

If so, it is not working. If you take a look at https://prostudy.nl/bijles-geven/bijles-geven-den-haag/ you see there is no full page width.

If it is the correct way to set up the Layout Element, then the question remains: How do I set up full page width for every page on my entire site?

I am looking forward to your response.

Kind regards,

Guido

[Elvin]

Hi there,

I’ve checked the site and the page you’ve linked actually in full-width. It’s the content added to the page that is being limited.

You have a GenerateBlocks container that has a max-width set to 1600px as shown here: https://share.getcloudapp.com/9Zu8Nepe

To fix this, edit the page and select the GB container block that wraps the whole content and make sure its “Inner container” is set to full width as well.

[Author]

Posts