Center buttons on responsive website - html

Question

I have a responsive website, on one of the pages I have 2 buttons, they are next to each other when the screen size is wide enough to fit both buttons, when the page is made smaller (i.e for a smartphone) then the second button (right) goes below the first. This works fine.
However when the buttons are one above the other they are positioned on the left, I would like to center them.
I have based it on this: http://jsfiddle.net/erenyener/puA72/2/
Here is a JS Fiddle: https://jsfiddle.net/kg2grant/
Here is the code:
HTML
<div class="button-wrapper">
<div class="fiftyLEFT" ><button type="submit" class="submit" value="submit" name="submit_button"><span>Search</span></button></div>
<div class="fiftyRIGHT"><button onclick="location.href='https://google.com';" class="submit" style="font-size: 22px; width: 500px" value="show" name="show_button">Google</button></div>
</div>
CSS
button.submit {
border: none;
background-image: linear-gradient(-180deg, #52A1DD 50%, #53A2DE 100%);
border-radius: 100px;
max-width: 90%;
margin-right: 5%;
padding: 8px 10px;
font-size: 26px;
color: #fff;
line-height: 30px;
cursor: pointer;
-webkit-transition: all .15s ease-in-out;
-moz-transition: all .15s ease-in-out;
-o-transition: all .15s ease-in-out;
transition: all .3s ease-in-out;
margin-top: 10px;
z-index: 1;
position: relative;
}
button.submit:hover {
color: #3193e9;
background: #fff;
}
button.submit {
width: calc(.5px + 50vw);
}
button.submit img: hover {
background-color: #C37500;
opacity:0.7 !important;
filter:alpha(opacity=70) !important;
}
.button-wrapper
{
width:100%;
padding-top:10px;
padding-bottom:10px;
display:inline-block;
border: 3px solid black
}
.button-wrapper > .fiftyLEFT
{
width:50%;
float:left;
min-width:50px
}
.button-wrapper > .fiftyRIGHT
{
min-width:400px;
width:50%;
float:left;
white-space: nowrap;
}
I have tried many things to like margin 0 auto and adding another container however had no luck! Thanks in advance for your help.

Answer 1

You can change the display to flex and achieve what you want by using #media query.
Forked jsFiddle with the behavior needed: https://jsfiddle.net/o1gpcLcr/

Answer 2

You will have to remove the float left property to do the margin auto.
.button-wrapper > .fiftyLEFT {
width: 50%;
/* float: left; */
min-width: 50px;
margin-left: auto;
margin-right: auto;
}
.button-wrapper > .fiftyRIGHT {
min-width: 400px;
width: 50%;
/* float: left; */
white-space: nowrap;
margin-left: auto;
margin-right: auto;
}
Then do the float left on larger screens with #media (min-width: 768px), or wherever you want it to break.

Answer 3

Using float makes margin auto behave strangely because the floated element have been removed from the regular flow of content. If you remove float: left from your last two CSS rules and declare margin: auto, it should work.
Alternatively, you can remove float: left, and then add
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
to your .button-wrapper rule. Using flexbox has the same effect as margin auto, but may make other changes and additions easier later in development.
To learn more about flexbox, check out https://flexbox.io for some great video tutorials.

Answer 4

You'll want to use CSS media queries, with more of a 'mobile-first' approach.
Make the buttons width: 100% by default and then use #media (min-width: 768px) {...} to change the width to 50%.
I've made some changes to your code:
button.submit {
border: none;
background-image: linear-gradient(-180deg, #52A1DD 50%, #53A2DE 100%);
border-radius: 100px;
padding: 8px 10px;
margin: 5px 0;
font-size: 26px;
color: #fff;
line-height: 30px;
cursor: pointer;
-webkit-transition: all .15s ease-in-out;
-moz-transition: all .15s ease-in-out;
-o-transition: all .15s ease-in-out;
transition: all .3s ease-in-out;
z-index: 1;
position: relative;
}
button.submit:hover {
color: #3193e9;
background: #fff;
}
button.submit img: hover {
background-color: #C37500;
opacity:0.7 !important;
filter:alpha(opacity=70) !important;
}
.button-wrapper {
width:100%;
padding: 10px 0;
display:inline-block;
border: 3px solid black
}
button {
width: 100%;
}
#media (min-width: 768px) {
button {
float: left;
width: 50%;
white-space: nowrap;
}
}
<div class="button-wrapper">
<div class="button" ><button type="submit" class="submit" value="submit" name="submit_button"><span>Search</span></button></div>
<div class="button"><button onclick="location.href='https://google.com';" class="submit" value="show" name="show_button">Google</button></div>
</div>