Jump to content
Sign in to follow this  
harry_ord

Contact Form submit button positioning

Recommended Posts

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:

 

#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%;
   
}

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?

Share this post


Link to post
Share on other sites

Here's the solution to my problem. Thanks.

 

#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;
}

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...