Make an Input button responsive on mobile? - css

Question

So i have a button which should be positioned to the right side of the page, But when site loads on mobile, i want it to center in the very middle of the Logo but instead renders right but incomplete and when it is rendered on desktop, it renders way to the left.
Here is how it looks on Mobile:
Desktop:
So anyway to achieve this ? Here is a bit of the code:
.mainBanner input{
position: relative;
left: 70%;
}
#buttonPush{
height: 35px;
width: 95px;
background-color:#1abc9c;
border: none;
color: #fff;
border-radius: 3px;
font-size: 22px;
border-bottom: 2px solid #16a085;
/*position: absolute;
left: 90%;*/
}
Here is the HTML code:
<header>
<div class="mainBanner">
<img id="mainLogo" src="img/logo.png">
<!--POST BUTTON-->
<div id="buttonPost"> <form action="#openModal"><input id="buttonPush" type="submit" value="Post"></form></div>
</div>

Answer 1

For that you need to use CSS3 Media Query.
Using that, you can change the CSS properties of the elements. Here is a general example:
#media only screen and (max-width: 900px) {
// properties here..
}
Now if you want to change the properties for a screen that is a bit shorter in size:
#media only screen and (max-width: 300px) {
// properties here...
}
Using this, you can change the style of the website on different screen types and sizes. You can also change the theme depending on whether the screen is mobile or desktop.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries