Search code examples
csswordpressbreakpoints

Button changes location on smaller screen - how to centre it instead of "margin-left: 0"?

Website: https://bucksfoodpartnership.org/

So on my desktop the text over the top image "Buckinghamshire Food Partnership believe that everyone is entitled to a Right to Food" and the button "Get involved" are aligned to left with 10% margin. However on smaller screen the text is centered (as it should be), but the button is aligned to the far left. How can I make it centered as well (not all the time, only when the text above is centered)?

I think this class makes it aligned to left:

.content-caption {
    max-width: 100%;
    left: 0;
    position: relative;
    text-align: center;

but adding

position: relative; 
left: 50%;
transform: translateX(-50%);

or

margin: auto;

Doesn't help really. Am I barking at the wrong tree here?

Solution

  • All you need to do is set wp-block-button to width:100%.

    .wp-block-button{
 width:100%;
}

    Because of all the inherited styles and the way inline-block behaves with text-align:center this will work for you. Even across your breakpoints.