Button alignment on mobile

[logoglo]

See https://www.logoglo.com/

I have this code:

@media only screen and (max-width:768px) {
    .button-align {
        float: none;
          text-align: center;
    }
}

So those sections (see our prices button) centralizes on mobile…BUT…its not working:

[Prasant]

Hello @logoglo,

Thanks for writing in!

On my end See our prices, order now and More info button is working fine on mobile and liking to respective pages. Please try to clear the cache and see how it goes.

Thanks.

[logoglo]

Sorry for the late reply, no luck, caches have been emptied, but its still showing slightly off center:

[lely]

Hi @logoglo,

alignleft class was added on the button. By default on Ethos stack, the following margins are define:

.alignleft {
    float: left;
    margin: .35em 2.15em .35em 0;
}

See there’s 2.15em right margin and 0 left margin. That’s the root cause of the issue. You may update above CSS to this to override margin:

@media only screen and (max-width:768px) {
    .button-align {
        float: none;
          text-align: center;
         margin: .35em auto;
    }
}

Hope this helps.

[logoglo]

Thanks! that did the trick!

[nabeel]

Glad we could help.

Cheers!