[Resolved] A few spacing/padding and layout issues

Home Forums Support A few spacing/padding and layout issues

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #286939
    Nick

    Hey,

    I’m running into a few weird layout issues, and I’m not sure what’s causing them.

    1. Loads or ‘random’ padding on the right of this page; https://klantkunde.nl/onzichtbaar-overtuigen/

    2. Adjusting content width, somehow removes padding between headline and text in blog view

    I found this CSS in another thread and added it for easier reading:

    .entry-content {
        max-width: 640px;
        margin: auto;
    }

    But this is what also happens:

    https://www.evernote.com/l/AGJw8dIeBTtFJoHI7REiDKG-oSLrD7lIPNc

    3. Image stretches too far from a certain responsive breakpoint

    This is caused by the CSS I got from the docs:

    /* blog view - image full width */
    .post-image .post-image img {
        position: relative;
        vertical-align: middle
    }
    
    .post-image + .entry-header + .entry-content:after, 
    .post-image + .entry-header + .entry-summary:after {
        clear: none;
    }
    
    .post-image-aligned-left .post-image {
        margin-top: -55px;
        margin-left: -55px;
        margin-bottom: -55px;
    }
    
    .post-image-aligned-right .post-image {
        margin-top: -55px;
        margin-right: -55px;
        margin-bottom: -55px;
    }
    
    .post-image-aligned-center .post-image {
        margin: -55px -55px 55px -55px;
    }

    Resulting in:

    https://www.evernote.com/l/AGIDQIv098BFmb8TAhmX_O6Fp0mBggNhUqU

    4. General spacing issue

    This is more of a request than a true problem I guess – but it would be nice if the spacing on the blog view was separate from the post/page view. Right now, when I remove the padding so that there is no awkward space above images on the blog – the padding on the posts is also removed, which looks really clunky;

    https://www.evernote.com/l/AGLXcBczx7dKYJWR-WTWXyfkpe3dqQQ_tiI

    Any help would be awesome 🙂

    Thanks!

    GeneratePress 1.3.44
    GP Premium 1.2.94
    #287053
    Tom
    Lead Developer
    Lead Developer

    Hi Nick,

    1. Not sure what you mean here?

    2. It looks like you’ve added the headline into the page header instead?

    3. What page is this on?

    4. Removing the padding to remove the space above the image probably isn’t the best method. I’m going to be adding an option that will make the featured images fit right up against the container soon. For now, if you’d like to link me to the blog I should be able to help with some CSS.

    #287067
    Nick

    Hi Tom, thanks for getting back to me!

    1. Just tested some more and I think it’s an issue caused by Thrive Content Builder. As disabling it solves the issue.

    If you go to this page (https://klantkunde.nl/onzichtbaar-overtuigen/), you’ll be able to scroll to the right, whereas that shouldn’t be the case.

    Like this: http://d.pr/i/45JH [screencast]

    Though, enabling the Page Builder Integration doesn’t seem to help.

    2. Yes correct. The (standard) headline is hidden on the post page, but is still visible on the blog (https://klantkunde.nl/), where the padding seems to be removed after adding the CSS tweak.

    3. https://klantkunde.nl/ (same as 2.)

    4. It’s not a big deal if you are adding it in a coming update! 🙂

    Cheers

    #287152
    Tom
    Lead Developer
    Lead Developer

    The scrolling to the right looks like it’s being caused by the transition of that grey box at the bottom of the screen coming in from the right side.

    Ah, for the title spacing, change your content width CSS to this:

    .entry-content {
        margin-left: auto;
        margin-right: auto;
        max-width: 640px;
    }
    #287295
    Nick

    Awesome Tom, thanks a lot!

    Btw, what would be the correct way to set a maximum width for the content in the Page Header section also?

    I tried a few things but none of them work..

    #287321
    Leo
    Staff
    Customer Support

    Hi Nick,

    Try this CSS to strict the width:

    .generate-page-header.grid-container {
        max-width: 800px;
    }

    Let me know.

    #287374
    Nick

    Hey Leo, thanks a lot for helping!

    The CSS you gave me didn’t work – but it helped me find something that did:

    .generate-inside-combined-content {
        max-width: 800px;
    }
    

    All is awesome again 🙂

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.