Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 28, 2017 at 12:22 am #767801
    mcraig77

    Ahoy,

    I’m trying to get my contact button on the same line as text fields. Please advise.

    March 28, 2017 at 4:11 pm #768255
    Yigit

    Hey mcraig77,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    #newsletter fieldset .form_element {
    width: 24%;
    margin-left: 1%;
    clear: none;
}

    Best regards,
    Yigit

    March 28, 2017 at 7:27 pm #768394
    mcraig77

    Ahoy Yigit Thanks for this. A couple of issues.

    1. The button is not the same height (see screesnhot 1) 2. For mobile I would still like it to be the full length. (see screenshot 2)

    Please Advise

    March 28, 2017 at 10:40 pm #768488
    John Torvik

    Hi,

    To change the button height, use this custom CSS code:

    
.form_element input[type=submit] {
height: 48px !important;
}

    And to solve the mobile problem, add this custom code:

    
@media screen and (max-width: 480px) {
    #newsletter fieldset .form_element {
      width: 100% !important;
   }
   
   .form_element input[type=submit] {
      width: 100% !important;
    }
}

    Best regards,
    John Torvik

    March 28, 2017 at 11:27 pm #768503
    mcraig77

    Thanks John,

    I noticed a couple of issues still. the text in the button is a little lower than the text on the contact form. See Screenshot1. The contact box does not seem to be centered now on desktop See Screenshot2. How can I fix that text and make the form be centered under the header “Get your free no obligation estimate or call 18008888888”

    March 29, 2017 at 7:32 am #768624
    John Torvik

    Hi,

    Alright! Let`s go:

    – To solve the first problem, in the .form_element input[type=submit] rule, add these properties:

    
line-height: 10px;
font-size: 16px;

    – To fix the align problem, you`ll need to create a custom class following this tutorial: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ for the column that the form is inside and add this custom CSS code:

    
.YourCustomClass {
    right: -52px;
}

    This is the column that you`ll create a new class: http://prntscr.com/eprfye

    Best regards,
    John Torvik

    • This reply was modified 7 years, 9 months ago by John Torvik.
    March 29, 2017 at 8:54 am #768671
    mcraig77

    Yo John,

    A couple of things.
    -I put the code in to solve the first problem but it didnt seem to work.
    -I added the custom css to the contact form box and than added the custom code in the quick css, it works but than it brings up whole other issue for tablet and mobile. As you can see from the first screenshot on the thread I sent you it is only not centered on desktop – once you shrink it everything is fine. When I add that code not when I shrink things, thought now perfect on desktop everything is off center when I shrink. I included screenshots to show this issue. How do I get it the form always centered?

    April 7, 2017 at 10:59 pm #774234
    Vinay

    Hi,

    Thank you for sharing the screenshots. As I understand the form is shifted to right in the mobile screen and looks fine on tablets and desktop.

    To remove the effect of the code in mobile device please replace the earlier code with the below enhanced version.

    @media screen and (min-width: 480px) {
.YourCustomClass {
    right: -52px;
}}

    Best regards,
    Vinay

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.