When I shrink the page my button overlaps-CodePudding

When I shrink the page my button overlaps. Here is the relevant html:

<tr>
        <td>
            <table style="width:100%;">
<tr align="center">
    <td  align="left" style="padding:25px;max-width: 60%;font-family: sans-serif;">
<td style="font-family: sans-serif;">
                        <a href="http://mywebsite.com/" style="background-color: #2980B9;text-decoration: underline;color:white;padding:12px 100px;border-radius: 2px;font-size: 14px;font-weight:200;cursor: pointer;border:0px;font-family: sans-serif;">MY WEBSITE</a>
                    </td>
    <td style="padding:25px;">
<p style="font-family: sans-serif;">This will link to my website. </p>
    </td>
</table>
</tr>
<tr>
        <td style="padding-right: 25px;padding-left: 25px;font-family: sans-serif;">

I want to make it so that my button is responsive and does not overlap.

CodePudding user response：

Try adding the white-space: nowrap property on your <a> tag:

<tr>
        <td>
            <table style="width:100%;">
<tr align="center">
    <td  align="left" style="padding:25px;max-width: 60%;font-family: sans-serif;">
<td style="font-family: sans-serif;">
                        <a href="http://mywebsite.com/" style="background-color: #2980B9;text-decoration: underline;color:white;padding:12px 100px;border-radius: 2px;font-size: 14px;font-weight:200;cursor: pointer;border:0px;font-family: sans-serif; white-space: nowrap">MY WEBSITE</a>
                    </td>
    <td style="padding:25px;">
<p style="font-family: sans-serif;">This will link to my website. </p>
    </td>
</table>
</tr>
<tr>
        <td style="padding-right: 25px;padding-left: 25px;font-family: sans-serif;">

CodePudding user response：

This is happening because you have given fixed padding to the button so it will take the exact size as it was taking in fullscreen mode. read Media Queries and you will understand what to do.

Still I will give you a short idea of what to do! resize the screen size to the point where you feel like the media query needs to be applied and then fix the padding and font size inside that media query so that the button stays in a single line.

Let me know if you don't understand this quite properly, I'll be happy to help you!