[Support request] Full width Page Header while not full screen & content with specific width

[themedleb]

Hello there,

Is there a way to make the Page Headers full width while it is not full screen, and content area with specific width using pixels or like pushed from the right and the left of the screen with 10% (lesser than the the Page Header).

Thank you.

[Leo]

Hi there,

Not sure what you mean? You should be able to just turn off full screen option?

The height can be adjusted using padding: https://docs.generatepress.com/article/page-header-content/#top-bottom-left-right-padding

[themedleb]

Yeah I did, but when the website is in bigger resolution screen the Page Header’s width looks limited, not full width, I think it’s because it is inside the website’s container. And about the content I need it’s width to be smaller than the Page Header’s.

[Leo]

Can you link me to the site?

[themedleb]

I’m sorry, It’s in a localhost, I can provide you with screenshots.

[Leo]

Any chance you can duplicate on a live server? It might help us find the solution faster.

[themedleb]

Okay.

[Daniel]

Would this do the trick?

/** Full width Page Header with specific width for Content **/

// Overrides "Container Width" option in Customizer > Layout > Container
body .grid-container {
  max-width: 100%;
}

// Manually set "Container Width" for the rest of the elements
.container.grid-container {
  max-width: 1200px;
}

I was looking for the customization option for having the page-header to be “separated” from the main content too. 🙂

[Leo]

Hi Daniel,

I’m not sure what you mean?

Can you open a topic for your question?

Thanks!

[Author]

Posts