[Resolved] different content margin on full width no sidebar

[Are Martin]

Hi Tom 🙂 How would I make the margin/padding of the main content on single blog posts and pages larger when I have full width/no sidebar set for that page?

The margins/padding set with the element spacing function in the customizer is all good when I use it with a content/sidebar layout, but with no sidebar it becomes 100% full width with so the lines of text becomes a bit too long for easy reading. I´d like the margin to be different and content centered with the no sidebar setting on pages and posts so the layout would look something similar to this:

https://premium.wpmudev.org/blog/noob-plugin-diary/

How can I achieve this?

I guess what I´m asking for is really what css selector I would use to target the margins/padding for the full width pages and posts only? (I would also like to have the content centered like this in sections, if that is possible)

[Tom]

Hi Are,

You could try something like this:

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

Basically, it will target element that are a direct child of the inside-article element, and reduce their width to whatever you choose.

The auto margin on either side will center those elements.

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

[Are Martin]

Thanks! 🙂 This works, however if a single post has a featured image, the image is still aligned to the left. It also seems to affect the .masonry-brick .inside-article element on the blog page so it no longer has a margin on the left and right. Any way to avoid this?

[Tom]

Try this:

.no-sidebar.single .inside-article > *,
.no-sidebar.page .inside-article > * {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

Any chance I can see an example of the featured image issue?

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

[Are Martin]

That worked! 🙂 Thanks

The featured image issue occurred in the customizer only when the page header was set to “above content”. Setting it to “inside content container” fixed it.

However, i have an additional question regarding the featured image. I´ll post that question in a separate thread:

https://generatepress.com/forums/topic/fluid-full-width-featured-image/

[Tom]

You’re welcome 🙂

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

[Patricia]

Hi everyone;

This looks fantastic, only that the comment area expands to 100% width making it look weird.

Any way to make the comment area have the same width as the content above?

Thanks in advance,

Patri

[Leo]

Can you link us to the page in question?

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

[Patricia]

Here you go:

https://ohmightyhealth.com/floradix-iron/

Scroll to the comments section, you’ll see it’s wider than the content section if that makes sense.

Thanks in advance.

Patri

[Leo]

I guess you could try increasing the padding with CSS this:

.no-sidebar.separate-containers .comments-area {
    padding: 22px 140px 40px 140px;
}

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

Just fine tune the second the fourth number for right and left padding respectively.

If you need additional help on this. Please open a new topic 🙂

Thanks!

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

[Author]

Posts