A few spacing/padding and layout issues

[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

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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

[Tom]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

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

[Leo]

Hi Nick,

Try this CSS to strict the width:

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

Let me know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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 🙂

[Author]

Posts