Archived topic
Span content's height & width to remaining screen space
7 replies · Started by Rakesh on November 26, 2020
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.
Hi there,
Any chance you can link us to the site in question?
You can use the private information field.
Let me know :)
Thanks Leo
I have included the site details in the private information section.
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?
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
Try this CSS to force that pages to fill the height of the screen:
.page-id-113 .inside-article {
min-height: calc(100vh - 200px );
}Thank you! That works for me.
Glad to hear that
