Centering submit button

Question

"Send My Free Ebook" submit button at www.Edge-Trainer.com isn't centering when viewing in mobile.. I've tried setting width, margins to auto, text align to center, display block and many other things but I can't get it to center.

Another issue that may or many not be related is if you scroll down to the 14 Day Kick in the Butt Jumpstart Program, the gray box is outside the white box but should be centered inside. I can't figure that out either.

Any help would be much appreciated!

Answer 1

You can try this..

And you must you this inside your mobile size media-screen code..

@media only screen and (max-device-width: 480px) {
    .smallcent{
        position: relative;
        right: 15px;
    }
    .btn_ebook{
        position: relative;
        right: 15px;
    }
}

it is 100% working...

Answer 2

The issue has to do with the size of the button. As the screen gets smaller the form does too. However the button does not have a pre-defined width, just that it is the size of the text + the padding you have given it.

There are 2 ways to go about fixing this, the first is to define an exact width, such as 75% in that case the button would get smaller and stay center aligned.

The other method is to use media queries for smaller devices and change the font size each time the screen size gets to a certain width.

Hope this helps!