Different Layout for home page (custom)

Anonymous

#261802

Partially redacted by @trevorsf

Hi there I have created a search form to include items from my whole website, and have placed the search on the home page.

It all works correctly and displays the results with filters on a seperate page.

The problem is that I would like to hide the filters on the home page, so that it is just a search bar, but allow the ability to filter once an item has been searched.

I would like to display just the search bar on the home page, with the search bar stretching all the way across the width of the website (as opposed to the small box that I have just now)

I think either something custom is in order to hide these filters etc on the home page

Anonymous

#261861

This reply has been marked as private.

Trevor

#262031

This reply has been marked as private.

Anonymous

#262039

This reply has been marked as private.

Trevor

#262043

It is because you have this:

.home .searchandfilter[data-sf-form-id="1134"] > ul > li.sf-field-search label {
    display: block;
    padding-right: 200px;
    padding-left: 200px;
}

The padding take up all the screen on mobile, pretty much.

You need to add some CSS media rules around the tat CSS, like this:

@media (min-width: 991px) {
    .home .searchandfilter[data-sf-form-id="1134"] > ul > li.sf-field-search label {
        padding-right: 200px;
        padding-left: 200px;
    }
}
.home .searchandfilter[data-sf-form-id="1134"] > ul > li.sf-field-search label {
    display: block;
}

It may take some fiddling with to get it right, but I will leave that to you, as this isn’t really within the scope of our support.

Anonymous

#262064

Works well, thank you trevor i appreciate you going out of your way

Trevor

#262068

Thanks for getting back to me. I will close this thread for now.

[Author]

Posts