CSS defined buttons collide on mobile devices - html

Question

I have defined two links and made them look like buttons using css styling.
HTML code looks like this:
<h2 style="text-align: center;"><strong>Continue to </strong> <a class="btn-white" href="/?page_id=137531"><strong>Accessories</strong></a> <a class="btn-red" href=""><strong>BUY</strong></a></h2>
How it should look
But on mobile devices, these two buttons collide.
Wrong mobile device look
Is it possible to style them using css, to display correctly, without collision?
btn-red class example is here:
.btn-red {
font-size: 20px;
font-weight: 500;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 8px 40px;
line-height: 1.7em;
background: transparent;
border: 2px solid;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
position: relative;}
a.btn-red {
background-color: #dd0000; /* change background color here */
border: 2px solid transparent;
color: #fff!important; /* change font color here */
font-weight: bold;}
a.btn-red:hover {
background: #dd0000; /* change background color on hover here */
border: 2px solid transparent;
padding: 8px 54px 8px 40px !important;}
a.btn-red:after {
font-family: 'ETmodules';
font-size: 32px;
opacity: 0;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 32px;
line-height: 1em;
content: "\35";
position: absolute;
margin-left: -1em;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;}
a.btn-red:hover:after {
opacity:1;
display: block!important;
font-family: 'ETmodules';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
right: 0px;
top: 5px;
margin-left: 0;}
EDIT:
I tried to use responsiveness for padding, which should be enough to solve my issue, but its not working as intended. What exactly is wrong? Code is included in btn-red class.
code here:
#media only screen and (min-width : 1024px){ padding: 8px 40px;}
#media only screen and (max-device-width : 320px) {padding: 2px 10px;}

Answer 1

I think this might work. However, I am not sure.
<h2 style="text-align: center;"><strong>Continue to </strong> <a class="btn-white" href="/?page_id=137531"><strong>Accessories</strong></a> <a class="btn-red" href=""><strong>BUY</strong></a></h2>
I had just added six times.

Answer 2

You can do this ...
Place "Continue to" & the buttons in two separate div elements.
HTML:
<div class="display-ib">Continue to</div>
<div class="display-ib">
<button class="btn1"></button>
<button class="btn2"></button>
</div>
CSS:
.display-ib {
display: block;
}
#media (min-width: 768px) {
.display-ib {
display: inline-block;
}
}
Being mobile first as per the trend today