Padding search box within an Element

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.

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

Dave

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

Thanks David. That did it.

Cheers,

Dave

You're welcome

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

Cheers,

Dave

Which padding issue ?

The padding under the search box.

cheers,

Dave

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

Thanks David. That solved a bunch of problems :)

Cheers,

Dave

You're welcome!