margin on posts without sidebar

This topic has 7 replies, 2 voices, and was last updated 6 years, 10 months ago by Andrew Misplon.

Author
Posts
June 25, 2017 at 4:19 am #7130

bluereef
Participant
Hi,
I’d like to add a margin to the text of all of my post and pages that don’t have a sidebar.
The images should not be affected.
Presently I’m adding: <p style=”margin-left: 5%; margin-right: 5%p> to each paragraph of text.
This works but is tedious.
How could I do this in the template file or through CSS?
I use ultra premium.
Thanks!
Frank
June 25, 2017 at 4:43 am #7131
Andrew Misplon
Keymaster
Hi Frank
Assuming you have Page Template set to Default and are using Page Settings below that in the sidebar with Page Layout set to No Sidebar, you can try the following:
```
@media (min-width: 680px) {
	.page-layout-no-sidebar .entry-content p {
		max-width: 90%;
	}
}
```
Add the above to Customize > Additional CSS. Adjust the max-width value as you’d like.
680px sets the min-width for this to apply as you most likely don’t want this to happen on small screens which have very little space to begin with.
June 25, 2017 at 4:19 pm #7132

bluereef
Participant
Hi Andrew,
Thanks for the quick response.
I added the code to additional CSS but it didn’t change anything in either pages or posts.
My settings for pages: Page Attributes/Template is set to “Default”. Page Layout set to “No Sidebar”.
My settings for posts: (No Page Attributes option). Page Layout set to “No Sidebar”.
Frank
June 26, 2017 at 9:46 am #7133
Andrew Misplon
Keymaster
Thanks. Please, try:
```
@media (min-width: 680px) {
	.page-layout-no-sidebar .entry-content p {
		margin-right: auto;
		margin-left: auto;
	    max-width: 90%;
	}
}
```
June 26, 2017 at 5:04 pm #7134

bluereef
Participant
Works beautifully on paragraph text but not on headings or lists.
How would I include all text?
thanks!
June 28, 2017 at 9:45 am #7151
Andrew Misplon
Keymaster
Sorry for missing your reply. Trying changing the snippet to:
```
@media (min-width: 680px) {
	.page-layout-no-sidebar .entry-content p,
	.page-layout-no-sidebar .entry-content ul,
	.page-layout-no-sidebar .entry-content ol,
	.page-layout-no-sidebar .entry-content h1,
	.page-layout-no-sidebar .entry-content h2,
	.page-layout-no-sidebar .entry-content h3,
	.page-layout-no-sidebar .entry-content h4,
	.page-layout-no-sidebar .entry-content h5,
	.page-layout-no-sidebar .entry-content h6 {
		margin-right: auto;
		margin-left: auto;
		max-width: 90%;
	}
}
```
We can just apply this to .entry-content but I assume you want your images to be the container full width.
June 28, 2017 at 4:38 pm #7152

bluereef
Participant
Hi Andrew,
It works perfectly!
I added: “.page-layout-no-sidebar .entry-content li,” to include numbered lists.
Thank you!
Frank
June 29, 2017 at 8:40 am #7154

Andrew Misplon
Keymaster
Awesome 🙂 Glad to hear you’ve made progress.
(li are list items for both ordered and unordered lists. ol will give you a numbered list.)
All the best. Cheers.
Author
Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.