- This topic has 9 replies, 4 voices, and was last updated 5 years, 7 months ago by Leo.
-
AuthorPosts
-
December 2, 2015 at 1:48 pm #157466Are 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)
December 3, 2015 at 12:08 am #157556TomLead DeveloperLead DeveloperHi 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.
December 3, 2015 at 7:59 am #157659Are MartinThanks! 🙂 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?
December 3, 2015 at 10:42 am #157719TomLead DeveloperLead DeveloperTry 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?
December 7, 2015 at 1:49 pm #158611Are MartinThat 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/
December 7, 2015 at 2:53 pm #158620TomLead DeveloperLead DeveloperYou’re welcome 🙂
September 1, 2018 at 1:33 pm #666175PatriciaHi 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
September 1, 2018 at 4:21 pm #666252LeoStaffCustomer SupportCan you link us to the page in question?
September 2, 2018 at 7:25 am #666615PatriciaHere 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
September 2, 2018 at 9:02 am #666732LeoStaffCustomer SupportI 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!
-
AuthorPosts
- The topic ‘different content margin on full width no sidebar’ is closed to new replies.