[Resolved] margin on posts without sidebar

This topic contains 7 replies, has 2 voices, and was last updated by  Andrew Misplon 1 year, 3 months ago.

  • Author
    Posts
  • #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

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

    #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

    #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%;
    	}
    }
    #7134

    bluereef
    Participant

    Works beautifully on paragraph text but not on headings or lists.
    How would I include all text?

    thanks!

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

    #7152

    bluereef
    Participant

    Hi Andrew,

    It works perfectly!
    I added: “.page-layout-no-sidebar .entry-content li,” to include numbered lists.

    Thank you!

    Frank

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

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

You must be logged in to reply to this topic.

Scroll to top