[Resolved] Simple Issue with fullwidth container

[chris]

Hi im struggling to replicate the smart slider 3 with just a container & image. For some reason i cant make it full width, i know its a silly issue but im clearly missing something.

Told the image to be full, and the container to both be full width?

Screenshots supplied, Thanks in advanced

[Ying]

Hi Chris,

Did you set the page’s content container to full width?

You can set it to full width in the layout metabox in the sidebar of the page editor:
https://docs.generatepress.com/article/layout-metabox-overview/#where-is-it

[chris]

Ah thank you can you tell me why i need to have such a big top margin or my page starts in my header and covers nav

[Ying]

Can I see your site?

[chris]

cleancompetitions.co.uk

[chris]

Hi i have made the front page now look how it was with full width, and containers giving padding for other content, however on my big screen the main image is out of view, and on laptop and mobile it looks as it should, any ideas? same issue as original really so wont bother opening new thread

[David]

Hi there,

tru this:

1. Add this CSS to your site.

.page-hero {
    margin-bottom: 30px;
    min-height: 30vw;
}

Note the min-height: 30vw;
Your background image is 362px x 1200px. Divide those into each other gives you a aspect ratio of 0.3
Which equates to 30vw in that CSS. Which means the hero will always maintain its aspect ratio.

2. edit the Header Element.

2.1 Remove the featured-image class for the element class.

2.2 Set the top and bottom padding to 0.

[chris]

Just made those changed and works perfect, used 40 instead so it fits a bit more snug but thank you so very much for the solution David as always!

[David]

Glad to be of help.

[Author]

Posts