This is my site:
http://cvkj.agencialosnavegantes.cl/
I have a contact form at the bottom of the page and i'm trying to put the submit button next to the text box, but i'm struggling a lot.
This is my initial css:
#enviarbajo {
background:url(http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/paper-plane-2.png) no-repeat;
background-color: #564585;
width:40px;
height:40px;
padding:0px 0 4px 0;
border:none; text-indent: -1000em; cursor:pointer;
border-radius: 0;
margin: 5%;
position: relative;
left: 35%;
}
Report post Posted Friday at 01:00 PM Hello
This is my site:
http://cvkj.agencialosnavegantes.cl/
I have a contact form at the bottom of the page and i'm trying to put the submit button next to the text box, but i'm struggling a lot.
This is my initial css:
background:url(http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/paper-plane-2.png) no-repeat;
background-color: #564585;
width:40px;
height:40px;
padding:0px 0 4px 0;
border:none; text-indent: -1000em; cursor:pointer;
border-radius: 0;
margin: 5%;
position: relative;
left: 35%;
} Then i tried to position the button using media-queries, but i'm not able to put the button where i want
@media (max-width: 768px){
#enviarbajo {
position: relative;
right: 100px;
}
}
Other media-query below:
@media only screen and (max-width: 500px) {
#enviarbajo {
position: relative;
right: 50px;
}
Is there a more efficient way of doing this?
As you're using a fixed width button there are 2 good options instead of using divs with 75% and 25% widths. In both solutions use 40px as the button width.
For the first div use calculated width: calc(100% - 40px)
#footer-widgets form.wpcf7-form div:nth-child(2){
width: calc(100% - 40px);
}
#footer-widgets form.wpcf7-form div:nth-child(2) > span{
margin: 0;
}
#footer-widgets form.wpcf7-form div:nth-child(2) input{
width: 100%;
}
#footer-widgets form.wpcf7-form div:nth-child(3){
width: 40px;
}
Use padding (40px) and absolute positioning of the button
#footer-widgets form.wpcf7-form {
position: relative;
}
#footer-widgets form.wpcf7-form div:nth-child(2){
width: 100%;
padding-right: 40px;
}
#footer-widgets form.wpcf7-form div:nth-child(2) > span{
margin: 0;
}
#footer-widgets form.wpcf7-form div:nth-child(2) input{
width: 100%;
}
#footer-widgets form.wpcf7-form div:nth-child(3){
width: 40px;
position: absolute;
top:0;
right: 0;
}