Centered button in reusable block aligning left

  • Resolved w-sky

    (@w-sky)


    3 years, 5 months ago

    Hello,

    the button “Inquiry & availability” on our page which should be centered is suddenly aligned left. It was fine until recently when I edited the page, though I did not edit the block with the button at first. This block is a reusable block.

    I have checked the settings in the backend editor multiple times. For a test, I have changed the button to be aligned right, which works as it should, then changed again to be center aligned but now it is left.

    Inside the editor, the button is centered as it should. When I inspect the button element on the front end, it seems to have CSS class aligncenter but this just does not function.

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

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi,

    It needs to be like this:

    <div class="wp-block-buttons aligncenter">
     <div class="wp-block-button aligncenter is-style-fill">
         <a class="wp-block-button__link has-black-color has-text-color has-background" href="https://chillisimo.com/booking/" style="background-color:#d0cfb7">Inquiry & availability</a>
     </div>
 </div>

    It seems you’ve deleted a “buttons” block and just have the button on its own.

    I hope that helps.

    Malcolm.

    Thread Starter w-sky

    (@w-sky)

    Hello Malcolm, yes thank you, the problem is fixed now. Indeed the outer div was missing, must have happened somehow when editing that page …

    Anyway, first I tried to re-insert the <div class… and </div> manually, but then the button block became a HTML block. It was okay on the front end, but for clarity, I then added a new button block and deleted that HTML block.

    Should have tried this at first! ?? Just delete the button which misbehaved and create a new one.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Centered button in reusable block aligning left’ is closed to new replies.