[Resolved] Padding search box within an Element

Home Forums Support [Resolved] Padding search box within an Element

Home Forums Support Padding search box within an Element

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1590934
    Dave

    I want to put padding under the search box that I have inserted into the header via a shortcode within an element.
    I already have defined the element with a class and styled that. How do I add padding to the just the search form?

    Cheers,

    Dave

    #1591030
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    .page-hero .search-form {
        margin-bottom: 20px;
        display: flex;
        justify-content: center;
    }

    It should also help align the search field and the submit button.

    #1591108
    Dave

    Thanks David. Unfortunately that didn’t work.
    Any other ideas?

    Dave

    #1591201
    David
    Staff
    Customer Support

    You have several additional } in your CSS that is breaking the code – see here – remove the ones i have commented:

    .page-hero-content {
        -ms-grid-row: 1;
        -ms-grid-column: 2;
        grid-area: right;
    }
    } /* Remove */
    
    .button.gradient,
    .button.gradient:visited {
        border-radius: 5px;
        /*Adjust accordingly*/
        background: rgb(255, 183, 65);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(49%, rgba(255, 183, 65, 1)), to(rgba(214, 38, 38, 1)));
        background: linear-gradient(180deg, rgba(255, 183, 65, 1) 49%, rgba(214, 38, 38, 1) 100%);
        -webkit-transition: all 0.35s ease;
        transition: all 0.35s ease;
        background-repeat: repeat-y;
        background-size: 100% 90px;
        background-position: 0 -30px;
    }
    
    .button.gradient:hover,
    .button.gradient:active {
        background-position: 0;
    }
    } /* Remove */
    
    /*Center Mobile Header*/
    .site-logo.mobile-header-logo {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    
    #mobile-header .menu-toggle {
        order: -1;
        margin-right: auto;
    }
    } /* Remove */
    
    /*Single Booking*/
    .entry-content.single-booking {
        padding: 40px;
        background-color: #cccccc;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    } /* Remove */
    
    /*Search Box Home*/
    .page-hero .search-form {
        margin-bottom: 20px;
        display: flex;
        justify-content: center;
    }
    } /* Remove */
    #1591232
    Dave

    Thanks David. That did it.

    Cheers,

    Dave

    #1591647
    David
    Staff
    Customer Support
    #1600815
    Dave

    Hi David. I am having issues making this padding work on mobile. Any ideas?

    Cheers,

    Dave

    #1600917
    David
    Staff
    Customer Support
    #1600922
    Dave

    The padding under the search box.

    cheers,

    Dave

    #1600932
    David
    Staff
    Customer Support

    At the very top of your CSS you have this media query:

    @media (min-width: 1025px) {

    But it doesn’t have its closing } so all the CSS that comes below that is only being applied to the larger screens.


    @media
    queries must close eg.

    @media (min-width: 1025px) { 
       .a-css-selector {
          /* the CSS propperties
       }
    } /* This bracket closes the media query */
    #1602716
    Dave

    Thanks David. That solved a bunch of problems 🙂

    Cheers,

    Dave

    #1602735
    David
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.