How to adjust margin or padding for a column block

  • Resolved MemeRunner

    (@memerunner)


    2 years, 2 months ago

    Under the module titled ‘Delivering the brand tone and attitude‘, I’m wanting to add space between that headline and the copy and image below it. There’s a column block containing the text on the left and the image on the right, as well as a column block for each of the elements, the text and the image.

    When I select any of the above columns and view the ‘block’ section on the right, I’m not seeing any way to adjust margin or padding. I thought for sure this was possible, but am not finding anything in searching on this topic. (I have a screen grab to share, but don’t see a way to attach it.)

    Any input on this is greatly appreciated.

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator bcworkz

    (@bcworkz)

    The spacing is determined by your theme’s CSS. Some offer an override within the editor, it depends on the editor you use. You can place additional CSS in the customizer to override theme defaults, for example:
    h2 ( margin-bottom: 60px;}
    Change the 60 to any spacing you like (it is currently set to 20 by your theme). This will affect all H2 elements on your site. You can use other selectors to further restrict where the rule is applied. Use your browser’s element inspector tool to help you learn what other selectors might be possible.

    You can also use the :nth-child() pseudo-selector to apply the rule to a specific element when the class attributes are all the same. Alternately, in the editor, specify a unique class or ID attribute value so the rule can only be applied to elements with those specific attribute values.

    Thread Starter MemeRunner

    (@memerunner)

    Thanks, @bcworkz

    I added h2 ( margin-bottom: 40px;} to my Customizing > Additional CSS window, but it only seems to be impacting the margin at the top of the page between the top nav area and the hero content section just below it, but hasn’t impacted the space below the page content h2s.

    I don’t get how that can be as there aren’t any other h2 references in my Additional CSS. I’ve been looking in inspect, but don’t see any reason why that would be happening. I did see a CSS class .entry-content h2, in inspect, and tried adding the margin-bottom name/value after it, but it didn’t produce any result.

    Moderator bcworkz

    (@bcworkz)

    You currently have the rule commented out, so I cannot investigate into what could be causing the problem. You could try this variant:
    h2.fonts-plugin-block { margin-bottom: 40px !important; }

    Using !important isn’t a very good practice, but it’s useful in a pinch when more conventional methods fail.

    Thread Starter MemeRunner

    (@memerunner)

    @bcworkz

    Thanks. I meant to reactivate that but forgot,

    But your new suggestion works great. So thank you very much.

    Also, appreciate the note on important. That’s very good to know.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to adjust margin or padding for a column block’ is closed to new replies.