[Resolved] Padding search box within an Element

[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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dave]

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

Dave

[David]

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 */

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dave]

Thanks David. That did it.

Cheers,

Dave

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dave]

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

Cheers,

Dave

[David]

Which padding issue ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dave]

The padding under the search box.

cheers,

Dave

[David]

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 */

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dave]

Thanks David. That solved a bunch of problems 🙂

Cheers,

Dave

[David]

You’re welcome!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts