Contact Form Not Responsive

andpersant
Posts: 6
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: 1911
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: 6
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: 83
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: 6
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: 83
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: 6
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: 83
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: 6
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.


Return to “Your Journey”

Who is online

Users browsing this forum: No registered users and 2 guests