Support » Fixing WordPress » how to use additional css to add margin to group block and column

  • Resolved ThelmaBrown

    (@thelmabrown)


    Hello
    I’m re-building a DreamWeaver website in WordPress.
    I need a couple of paragraphs sharing a background colour. (see link) Using paragraph blocks leaves a space between the paragraphs, putting the paragraphs in a group block loses all the margin or padding, don’t know why.

    Is it possible to remove the space between the paragraph blocks, or is the best option margin or padding in the group block?

    I’m not familiar with WordPress and haven’t understood how to use the block’s additional css option to create a margin for my column-group. {margin:1.5em}

    I also need a top margin on the right hand column. {margin-top:1em}

    Should I use ems or Px?
    should I use margin or padding?

    What do I put in the additional css boxes for these blocks?

    Thank you

    • This topic was modified 3 months, 2 weeks ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Hi @thelmabrown ,

    If you don’t want to assign custom class names to your containing blocks (or don’t know how), these CSS selectors should work as-is with your page (tested on Firefox dev tools style editor).

    
    /* Padding for Version 1 */
    :root .has-very-light-gray-background-color {
        padding: 30px 28px;
    }
    
    /* Background Colour for Version 2 */
    .wp-block-column:not(:first-child) {
        background-color: #eee;
    }
    
    

    How to Add CSS to WordPress with Gutenberg Examples

    https://medium.com/@marklchaves/adding-custom-css-to-your-wordpress-website-how-to-guide-a50b474af36d

    More on PX, REM, EM, and VW CSS Units

    https://codepen.io/marklchaves/pen/LYYyVbB

    https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

    In general for responsive design (small and large devices), I use %units for padding and margins.

    • This reply was modified 3 months, 2 weeks ago by mark l chaves. Reason: Added more references to CSS units

    Hello Mark

    Thank you very much, and especially for the links, I’m finding them very helpful, but I still haven’t managed to find documentation to get me started on how to apply my knowledge of classes to Gutenberg blocks.

    I have tried adding the code you suggested ‘as is’, but it hasn’t altered the appearance.

    Have I done the wrong thing?

    Thelma

    Hi @thelmabrown ,

    Sorry for the delay. I’d have to see your code again. I tried to revisit your page, but it’s throwing a 404.

    Please share a new link, if you still need help. 🙂

    ThelmaBrown

    (@thelmabrown)

    Sorry for the 404, I rearranged the menu and inadvertently moved the page.
    I just discovered that if you give a paragraph in a group a background colour then the padding ‘re-appears’.
    I have set this up on a test page: test page
    This means that both my questions can be answered the same way: give the paragraphs the same background colour as a group block.

    BUT I still don’t know how to use the ‘add CSS class’ in the visual editor to add padding to a paragraph. For example I could put this on my style sheet in Dreamweaver, .paragraph-padding-bottom {padding-bottom: 50px;} but what do I do in WordPress?

    Thanking you in advance

    Hi @thelmabrown ,

    Thanks for the test page. Interesting findings. Thanks for sharing that.

    BUT I still don’t know how to use the ‘add CSS class’ in the visual editor to add padding to a paragraph.

    Sorry that my How-to article didn’t answer your question. If you still need to know, I just posted this piece on DEV. Jump to the Gutenberg section where I explain how to add CSS code and a CSS class name to a Gutenberg block.

    https://dev.to/marklchaves/the-staggered-layout-problem-mobile-stacking-order-3gnp/#gutenberg

    I hope it helps!

    Hi Mark
    You new post has answer my question. I knew I was missing something obvious. I knew about the customise – additional CSS page, but hadn’t realised that is where I put my class styles, thinking was only for site-wide alterations to, say, <p> etc. I’m wondering now how I managed to think that!
    Your post is also very interesting.
    Many thanks!

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.