[Support request] Add Search Hero Box under Header

[David]

I am still seeing empty grid columns being used. Really need to remove the grid block and just add the content to the container block. I need to change so i can provide CSS to force the width of the Search field, which won’t work properly with those columns around it.

[ahmad]

Alright Removed it

[David]

Add this CSS:

.gb-inside-container form.search-form label {
    flex: 1;
    max-width: 600px;
}
.gb-inside-container form.search-form input[type="search"] {
    width: 100%;
}

Adjust the max-width: 600px; to suit – or you can remove that property for it to fill the container.

[ahmad]

Awesome that worked!

though on mobile the search button is next to the input field which is annoying
is there a way to make the button under the input field only on mobile?

[David]

Try this CSS:

@media(max-width: 500px) {
    .gb-inside-container form.search-form {
        flex-wrap: wrap;
    }
    .gb-inside-container form.search-form label,
    .search-form input[type=submit] {
        flex: 1 0 100%;
        margin-top: 5px;      
    }
    .gb-inside-container form.search-form input[type="search"] {
        text-align: center;
    }
    
}

[ahmad]

kinda worked but can we add a bit of space in between the input and the button
now it’s just attached to it?

best

[David]

edited the CSS here to include a little space

[Author]

Posts