In my responsive webpage. On that page I have text and then there is a button. The problem is button moves on text when I resize the page. The button needs to be below text and should remain below text as I resize the page.
If you copy and paste the code in HTML, and then try to resize the page, you would see button does change size (as I need) but the location of the button is not ok. It goes on text
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<style>
@media screen and (max-width: 500px) and (min-width: 300px) {
#Space_I { height:28px;}
#Space_J { height:22px;}
#Space_K { height:3%;}
#Main_Title {
width: auto;
height: 48px;
font-size: 23px;
line-height: 1.04;
color: #222222;
margin-left:6%;
margin-right:6%;
}
#First_Blog{
height: 100px;
}
#First_Read_More_Button{
width: 291px;
height: 45px
}
}
@media screen and (max-width: 1600px) and (min-width: 500px) {
#Space_I { height:33px;}
#Space_J { height:26px;}
#Space_K { height:3%;}
#Main_Title{
width: auto;
height: 36px;
font-size: 31px;
color: #000000;
margin-left:5%;
margin-right:5%;
}
#First_Blog{
height: 120px;
}
#First_Read_More_Button{
width: 167px;
height: 45px;
}
}
body {
margin: 0 !important;
padding: 0 !important;
}
</style>
</head>
<body>
<div class="wholepage" style="margin: auto;">
<div class="container" >
<table>
<tbody>
<tr>
<td>
<span id="Space_I" style="display:block"></span>
</td>
</tr>
<tr>
<td>
<div id="Main_Title" style="font-family: Arial;font-weight: bold;text-align: center;">
14 Best travel hacks for globetrotters
</div>
</td>
</tr>
<tr>
<td>
<span id="Space_J" style="display:block"></span>
</td>
</tr>
<tr>
<td>
<div id="First_Blog" style="font-family: Arial;font-size: 15px;line-height: 1.5;text-align: center;color: #222222;">
<p style="margin-left:6%;margin-right:6%;text-align:justify">As fantastic as traveling is, it can be stressful at times – you have to pack and keep track of everything you need while navigating a new environment. But fear not, friends. We collected 14 travel hacks that will help you MacGyver your next trip: we tell you why you should always use the shower caps in hotel rooms, why you need to buy diapers even if you don’t have a baby, and why dryer sheets are best used before doing laundry. And that’s only the beginning. </p>
</div>
</td>
</tr>
<tr>
<td>
<span id="Space_K" style="display:block"></span>
</td>
</tr>
<tr>
<td>
<div style="text-align:center;overflow:hidden;">
<button id="First_Read_More_Button" style="border-radius: 100px;border: solid 0.8px #00a4c3;">Read More</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>The read more button needs to below the text
Simply remove the height you are applying to #First_Blog. By specifying a height the content is overflowing and going above the button.
@media screen and (max-width: 500px) and (min-width: 300px) {
#Space_I {
height: 28px;
}
#Space_J {
height: 22px;
}
#Space_K {
height: 3%;
}
#Main_Title {
width: auto;
height: 48px;
font-size: 23px;
line-height: 1.04;
color: #222222;
margin-left: 6%;
margin-right: 6%;
}
#First_Read_More_Button {
width: 291px;
height: 45px
}
}
@media screen and (max-width: 1600px) and (min-width: 500px) {
#Space_I {
height: 33px;
}
#Space_J {
height: 26px;
}
#Space_K {
height: 3%;
}
#Main_Title {
width: auto;
height: 36px;
font-size: 31px;
color: #000000;
margin-left: 5%;
margin-right: 5%;
}
#First_Read_More_Button {
width: 167px;
height: 45px;
}
}
body {
margin: 0 !important;
padding: 0 !important;
}<body>
<div class="wholepage" style="margin: auto;">
<div class="container">
<table>
<tbody>
<tr>
<td>
<span id="Space_I" style="display:block"></span>
</td>
</tr>
<tr>
<td>
<div id="Main_Title" style="font-family: Arial;font-weight: bold;text-align: center;">
14 Best travel hacks for globetrotters
</div>
</td>
</tr>
<tr>
<td>
<span id="Space_J" style="display:block"></span>
</td>
</tr>
<tr>
<td>
<div id="First_Blog" style="font-family: Arial;font-size: 15px;line-height: 1.5;text-align: center;color: #222222;">
<p style="margin-left:6%;margin-right:6%;text-align:justify">As fantastic as traveling is, it can be stressful at times – you have to pack and keep track of everything you need while navigating a new environment. But fear not, friends. We collected 14 travel hacks that will help you MacGyver your
next trip: we tell you why you should always use the shower caps in hotel rooms, why you need to buy diapers even if you don’t have a baby, and why dryer sheets are best used before doing laundry. And that’s only the beginning. </p>
</div>
</td>
</tr>
<tr>
<td>
<span id="Space_K" style="display:block"></span>
</td>
</tr>
<tr>
<td>
<div style="text-align:center;overflow:hidden;">
<button id="First_Read_More_Button" style="border-radius: 100px;border: solid 0.8px #00a4c3;">Read More</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>By the way you can simplify your code as you don't need the table structure and all theses media queries. You can simply make it like this and play with padding/margin for spacing :
#First_Blog {
font-family: Arial;
font-size: 15px;
line-height: 1.5;
text-align: center;
color: #222222;
margin: 20px 6%;
text-align: justify;
}
#Main_Title {
font-family: Arial;
font-weight: bold;
text-align: center;
font-size: 23px;
line-height: 1.04;
color: #222222;
margin: 50px 6% 0;
}
#First_Read_More_Button {
border-radius: 100px;
border: solid 0.8px #00a4c3;
width: 291px;
height: 45px;
display: block;
margin: auto;
}
body {
margin: 0 !important;
padding: 0 !important;
}<div id="Main_Title">
14 Best travel hacks for globetrotters
</div>
<div id="First_Blog">
<p>As fantastic as traveling is, it can be stressful at times – you have to pack and keep track of everything you need while navigating a new environment. But fear not, friends. We collected 14 travel hacks that will help you MacGyver your next trip: we
tell you why you should always use the shower caps in hotel rooms, why you need to buy diapers even if you don’t have a baby, and why dryer sheets are best used before doing laundry. And that’s only the beginning. </p>
</div>
<button id="First_Read_More_Button">Read More</button>