[Resolved] Span content’s height & width to remaining screen space

[Rakesh]

Hello

I would like some CSS help.
Current specs:
– GeneratePress Version: 3.0.2
– GP Premium Version: 1.12.2

As shown in the image, I have a page with Footer disabled (using Disable Elements).

#1
For this specific page, I need the article element’s height to span to remaining screen height.
Its current height is determined by the content’s height. But, I need it to span and occupy all remaining screen height.

#2
The “entry-content” div is bounded by the “max-width: 700px” property. How can I disable this rule for this specific page?

You help is much appreciated.

[Leo]

Hi there,

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

You can use the private information field.

Let me know 🙂

[Rakesh]

Thanks Leo
I have included the site details in the private information section.

[David]

Hi there,

that site import uses some CSS to fix the width of the article content.
Go to Customizer > Additional CSS and remove this:

.no-sidebar .inside-article > *, .no-sidebar #comments, .no-sidebar .nav-links {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

Are you going to add any more content to this page?

[Rakesh]

Great! Thanks David.
Removing the CSS solved the width issue. Though it is a site-wide change, I am happy with the result.

Any advice on the height issue (#1)?

No – I am not intending to add any more content to the test page (that I privately shared).

Thanks

[David]

Try this CSS to force that pages to fill the height of the screen:

.page-id-113 .inside-article {
    min-height: calc(100vh - 200px );
}

[Rakesh]

Thank you! That works for me.

[David]

Glad to hear that

[Author]

Posts