Make table buttons go full-width on small screens - html

Question

Trying to make a border-based button go full-width on small screens. Needs to work via CSS and HTML because this is for an email which can't use JS.
Any ideas?
Tried using media queries but it didnt work.
P.S. Border buttons are described here: https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design
.container {
width: 100%;
height: 300px;
background-color: #000000;
}
.link-button {
font-size: 16px;
font-family: Helvetica, Arial, sans-serif;
color: #ffffff;
text-decoration: none;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
background-color: #EB7035;
border-top: 12px solid #EB7035;
border-bottom: 12px solid #EB7035;
border-right: 18px solid #EB7035;
border-left: 18px solid #EB7035;
display: inline-block;
}
#media only screen and (max-width: 480px) {
.inner-table {
width: 100%;
}
}
<div class="container">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="outer-table">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" class="inner-table">
<tr>
<td>
<a class="link-button" href="http://google.com" target="_blank">I am a button</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>

Answer 1

Try to add min-width for the smaller screens

Answer 2

For anyone else, the answer is to set the .link-button class as a block instead of inline-block.
.inner-table {
text-align: center;
}
.link-button {
font-size: 16px;
font-family: Helvetica, Arial, sans-serif;
color: #ffffff;
text-decoration: none;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
background-color: #EB7035;
border-top: 12px solid #EB7035;
border-bottom: 12px solid #EB7035;
border-right: 18px solid #EB7035;
border-left: 18px solid #EB7035;
display: inline-block;
}
#media screen and (max-width: 480px) {
.link-button {
display: block !important;
}
}
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="outer-table">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" class="inner-table" width="100%" >
<tr>
<td>
<a class="link-button" href="http://google.com" target="_blank">I am a button</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
Thanks to #CBroe who provided this answer in the comments.