Help with css syntax please / reduce top margin

  • Resolved cliffg1821

    (@cliffg1821)


    11 months, 2 weeks ago

    (Sorry, no public site at present, I can add screen shots if needed)

    With the plain Twenty Twenty-five theme, there is a fair bit of white space below the header bar and above the site title. If when Inspecting the site (F12 in Firefox) and selecting the <main … /main> content block :

    <main id=”wp–skip-link–target” class=”wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained” style=”margin-top:var(–wp–preset–spacing–60);”>

    and if I add a tick (to disable it) to :

    [tick] element {
    margin-top: var(–wp–preset–spacing–60);
    }

    then the margin reduces (not as much as I’d like, but I’ll take it for now). The box model shows the box top margin reducing from 70px to 19.2 (presumably the 19.2 is set elsewhere)

    I am fairly sure I need to add custom css to the theme Content Block under Appearance/Editor/Templates/[the page in use], however, I am very new to this theme, to Gutenberg and to css and as yet have not got the syntax right!

    Can anyone give the correct syntax? Thanks.

    • This topic was modified 11 months, 2 weeks ago by cliffg1821.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter cliffg1821

    (@cliffg1821)

    11 months, 2 weeks ago

    On further investigation, removing the top padding has the same effect, probably better

    Selecting <div class=”wp-block-group alignfull has-global-padding is-layout-constrained wp-block-group-is-layout-constrained” style=”padding-top:var(–wp–preset–spacing–60);padding-bottom:var(–wp–preset–spacing–60)”>

    if I tick (disable) as follows:
    element {
    [tick] padding-top: var(–wp–preset–spacing–60);
    padding-bottom: var(–wp–preset–spacing–60);
    }

    and the box view padding goes from 70 to 0

    Thread Starter cliffg1821

    (@cliffg1821)

    11 months, 2 weeks ago

    I have used the following css in the Content block in the template editor but it does not work:

    selector {
    padding-top: 0;
    }

    yet if I turn the padding-top element off in the Inspector, it works as I want.

    I am not sure I understand the “selector” entry (which the WP editor has pre-populated in the custom css field

    Thanks in advance

    • This reply was modified 11 months, 2 weeks ago by cliffg1821. Reason: clarify
    • This reply was modified 11 months, 2 weeks ago by cliffg1821.
    Carolina Nymark

    (@poena)

    11 months ago

    Hi

    This spacing is included in the template. To change it, the recommended way is to edit the template in the Site Editor, locate the block, and adjust the spacing in the option in the block sidebar: Open the styles panel, dimensions, then adjust the top margin.
    You need to do this on all templates where you want to change the spacing.

    The spacing is not on the content block. It is on the group block that is in the template. One of the blocks that the content block is placed inside.

    Thread Starter cliffg1821

    (@cliffg1821)

    11 months ago

    Thanks Carolina. I’m getting to grips with this now.

    • This reply was modified 11 months ago by cliffg1821. Reason: tick resolved
Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Help with css syntax please / reduce top margin’ is closed to new replies.