Contact Form Not Responsive

andpersant
Posts: 13
Joined: Sun May 14, 2017 10:18 pm
Contact:

Contact Form Not Responsive

Postby andpersant » Sun May 14, 2017 10:20 pm

The contact form on my Contact page isn't responsive. The fields are breaking the container and going off the right side of the screen. The web page is www.andrewuncharted.com/contact

User avatar
pirateS
Site Admin
Posts: 2017
Joined: Wed Nov 05, 2014 11:49 am
Contact:

Re: Contact Form Not Responsive

Postby pirateS » Sun May 14, 2017 11:22 pm

Hi,
Please contact your hosting provider. That's because PHP mail is disabling by your hosting.
Thanks

andpersant
Posts: 13
Joined: Sun May 14, 2017 10:18 pm
Contact:

Re: Contact Form Not Responsive

Postby andpersant » Tue May 16, 2017 7:49 am

I did so, they allowed it from their end and it's still broken.

hungitms
Posts: 86
Joined: Wed Mar 02, 2016 8:36 am
Contact:

Re: Contact Form Not Responsive

Postby hungitms » Tue May 16, 2017 8:51 am

The fields are breaking the container and going off the right side of the screen

hi. You copy code below and paste into custom css in Admin->Appearance->Customize->Header->Custom Css then click button "Save Change"

CodeColon Select All Code

.contact-form form {
    margin-left: 0;
    margin-right: 0;
}

.wpcf7-form p {
    padding-top: 0;
    padding-bottom: 0;
}

.wpcf7-form p label {
    font-size: 14px;
    display: block;
    width: 100%;
}

.wpcf7-form p .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="tel"] {
    width: 60%;
}

.wpcf7-form textarea {
    width: 90%;
    margin-bottom: 10px;
}

@media(max-width: 480px) {
    .wpcf7-form input[type="text"],
    .wpcf7-form input[type="email"],
    .wpcf7-form input[type="url"],
    .wpcf7-form input[type="tel"] {
        width: 100%;
    }

    .wpcf7-form textarea {
        width: 100%;
    }
}

andpersant
Posts: 13
Joined: Sun May 14, 2017 10:18 pm
Contact:

Re: Contact Form Not Responsive

Postby andpersant » Tue May 16, 2017 10:09 am

Thank you! That worked. I have one more question, how do I change the blog layout from col-md-9 (content) and col-md-3 (sidebar) to col-md-8 and col-md-4?

hungitms
Posts: 86
Joined: Wed Mar 02, 2016 8:36 am
Contact:

Re: Contact Form Not Responsive

Postby hungitms » Wed May 17, 2017 9:18 am

hi. You can use custom js with code below in Admin->Appearance->Customize->Footer->Custom Js

CodeColon Select All Code

changeColumn();
function changeColumn() {
   var $contentCol = jQuery('.blog-content > .container > .row > .col-md-9');
   var $sidebarCol = jQuery('.blog-content > .container > .row > .col-md-3');

   if($contentCol.length) {
      $contentCol.removeClass('col-md-9').addClass('col-md-8')
   }

   if($sidebarCol.length) {
      $sidebarCol.removeClass('col-md-3').addClass('col-md-4')
   }
}

andpersant
Posts: 13
Joined: Sun May 14, 2017 10:18 pm
Contact:

Re: Contact Form Not Responsive

Postby andpersant » Thu May 18, 2017 6:24 am

Perfect. And how do I change when at which breakpoint the menu switches from a navigation to the hamburger menu?

hungitms
Posts: 86
Joined: Wed Mar 02, 2016 8:36 am
Contact:

Re: Contact Form Not Responsive

Postby hungitms » Thu May 18, 2017 8:31 am

hi. In Admin->Appearance->Editor
You select template "navigation.php" in the sidebar on the right side of the screen

Image

and change number "data-menu-responsive" you want navigation to the hamburger menu

Image

then click button "Update File"

andpersant
Posts: 13
Joined: Sun May 14, 2017 10:18 pm
Contact:

Re: Contact Form Not Responsive

Postby andpersant » Fri May 19, 2017 6:52 am

Okay, I changed it from 1200 to 728 and that worked, but the navigation links are disappearing when the screen is smaller than 1200 but larger than 728.

hungitms
Posts: 86
Joined: Wed Mar 02, 2016 8:36 am
Contact:

Re: Contact Form Not Responsive

Postby hungitms » Sat May 27, 2017 9:33 pm

hi. please add custom css below into custom css.

CodeColon Select All Code

@media (max-width: 1199px){
  .navlist {
    visibility: visible;
  }
}


Return to “Your Journey”

Who is online

Users browsing this forum: No registered users and 1 guest