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

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

Home Forums Support Span content’s height & width to remaining screen space

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1550749
    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).
    Issue

    #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.

    #1550857
    Leo
    Staff
    Customer Support

    Hi there,

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

    You can use the private information field.

    Let me know 🙂

    #1550997
    Rakesh

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

    #1551591
    David
    Staff
    Customer Support

    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?

    #1553951
    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

    #1554981
    David
    Staff
    Customer Support

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

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

    Thank you! That works for me.

    #1556139
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.