Adding margins / indents to blocks

  • jackandersonnes · Member ·

    Hi,

    I am trying to add margins to my pages so that certain content is indented, but I would also like to retain full screen size for certain blocks i.e. footers, page breakers etc.

    the wide width or narrow width options offer too much negative space, I only want a narrow margin for these blocks. Is there any way to customise the margin size for certain blocks while excluding others – or some feature that would do the equivalent?

    Would love to know, thanks!

    The blog I need help with is: (visible only to logged in users)

  • kokkieh · Staff ·

    Hi there,

    If we’re speaking of individual paragraphs, you can add a custom CSS class to specific blocks in the editor. Then you can target that class using custom CSS code to only affect the paragraphs that have that class added:

    Edit a post, click on the block you want indented, and in the settings sidebar on the right click Advanced options. In the custom CSS class field type indent-text. Update, and exit the editor.

    Next go to Appearance ->Customize -> Additional CSS, and add the following code on a new line:

    .indent-text {
    padding-left: 30px;
    padding-right: 30px;
}

    You can adjust those values depending on how much you want the paragraph indented.

    If I’m misunderstanding what you want to do, can you explain in a bit more detail? It might be helpful if you can point to a specific page on your site, and the specific content you want to indent.

    You can also get help with this via live chat if you prefer. You can click the question mark icon bottom-right on the dashboard or use the form at https://wordpress.com/help/contact to connect to live chat support.

  • jackandersonnes · Member ·

    Hi,

    Thank you for your response.

    The page in question is the landing page of noextrasource.com.

    I would like to have an indent to the Headings and the Advanced Posts Block indented – essentially every block other than the gradient coloured block at the bottom of the page titled ‘Keep up to date with the latest from No Extra Source’

    Appreciate your help, thank you.

  • kokkieh · Staff ·

    So you don’t want the content above the footer to be flush with the left edge of the screen?

    The method I gave above would work, and ultimately gives you more control, as you then only add the custom CSS class to the elements you want to indent.

    But this should work as well:

    /* indent content of front page, except for cover block at the bottom */
.home div.entry-content > *:not(:last-child) {
  padding-left: 20px;
}

    If you want to add a margin to the right side as well, you can just add a padding-right: 20px; as well, still inside the curly braces.

    To make this a bit more future proof, I’d recommend adding a custom class to that cover block at the bottom instead, say dont-indent, and then change the code above to say *:not(.dont-indent). That just more specifically singles out that particular block.

    The code as I gave you above targets the final element on the page, rather than the specific cover block, so if you ever added anything below that block, my code won’t work any more.

  • jackandersonnes · Member ·

    Yes that’s right, so that there’s a gap between the edge of the screen and the content for all blocks other than the footer.

    Thanks for your help – that code indented the text – it did not seem to work on any blocks that were not text though, leaving them flush with the edge of the screen still.

    Any ideas?

    Thanks

  • metabreakr · Staff ·

    Hi @jackandersonnes,

    While the CSS provided by my colleague should generally work with the Mayland theme, you might have to consider a workaround for the content added by the Advanced Post Block plugin.

    Please keep in mind, we can only provide limited support for third-party themes and plugins, so I suggest reviewing its documentation and reaching out to the authors for support. You can learn more about that here: https://wordpress.com/support/plugins/third-party-plugins-and-themes-support/

    Here are some support links that I found:

    * https://bplugins.com/support/
    * https://wordpress.org/support/plugin/advanced-post-block/

    I hope that points you in the right direction.

  • The topic ‘Adding margins / indents to blocks’ is closed to new replies.