customizing a button

  • I’m using the Button block (from the block editor) to put “Buy Print” buttons under photos, with a link to a POD site page.

    This stock button is ok but the block has unnecessary white space above the actual button, which puts a big gap between the button and the photo.

    How can I customize this button, to at least change the white space?

    • This topic was modified 3 years, 1 month ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic
Viewing 4 replies - 1 through 4 (of 4 total)

  • That “unnecessary white space” is very likely coming from your theme’s stylesheets.

    Kindly share your site’s URL so I can take a look and give you custom CSS code to get rid of this unwanted white space.

    Thread Starter jimh12345

    (@jimh12345)

    George, here’s a post to which I just added a “Buy Print” button. I’d like it to be closer to the photo above it.

    https://jimhphoto.com/index.php/2020/05/17/ids-center-icon-of-70s-cool/

    • This reply was modified 3 years, 1 month ago by jimh12345.

    Put this in APPEARANCE => CUSTOMIZE => ADDITIONAL CSS (and PUBLISH to save changes):

    .wp-block-button .wp-block-button__link {
margin-top: 0px;
}

    This should remove the space directly above the button, as marked in the screenshot below:

    If you need the button to be even closer to the image, kindly add this as well:

    .wp-block-image {
margin-bottom: 0px;
}

    This will remove the space below the image as indicated below.

    Note that you can set the margin values to any figure you want (eg 2px).

    I hope that helps!

    Thread Starter jimh12345

    (@jimh12345)

    Thanks George, that solved my problem very neatly. I don’t change the look of my blog often so I forget how all this stuff works – and how easy it can be to fix, when you know how.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘customizing a button’ is closed to new replies.