Remove search from Search & Filter Gallery

Hi @bigtasty ,
Greetings.

You can hide the search box placeholder text and the input area from the style settings of the Filterable Gallery by following this guide: https://d.pr/v/OlSQai. Alternatively, you can use custom CSS to hide the search field.

form#fg-layout-3-search-box {
display: none;
}

You can simply add custom CSS by navigating to your WordPress?Dashboard -> Appearance -> Customize. After you are on the Customizer page, search for the “Additional CSS” option. You can then go ahead and insert CSS Code. Please check this screencast to learn more – https://d.pr/v/QrrfTw.

Please check and feel free to let us know how it goes. We would be happy to help you.
Thanks,

Hi @bigtasty ,
Hope you’re doing well.

We haven’t received any updates from you since then. Could you please provide us with an update?

We eagerly await your response.
Thanks!

Hi @bigtasty ,

It has been quite some time since we last heard from you. Therefore, we are assuming that your issue has been resolved. We will now proceed to close this topic. We wanted to let you know that you are always welcome to re-open the topic if you have any further questions or concerns.

Have a Great Day!

Hey, apologies for the delay in response but I have been working on another project! Thanks for your instructions, but I’m still having some issues;

The CSS doesn’t appear to work, and is also marked in red in the Customizer (indicating there is an error).

I also followed the screencast (thanks for putting that together!), but the search box is still showing. It is smaller, but is still there as you can see when hovering over it (and it also still allows you to input text).

I have uploaded an image HERE and you can visit the page HERE (it’s the second portfolio).

I’m also unable to get the dropdown to be central.

Finally, is it possible to use the Overlay layout in conjunction with the Search & Filter? I’ am trying use I’m planning to use the Search & Filter option only for mobile devices, as it looks a bit cleaner than having the tabs above the content – so ideally I’d like the layouts to match.

If this isn’t possible I will stick with the tabs ??

Thanks in advance.

Hi @bigtasty ,

Greetings! Thank you for contacting us and sharing the page URL.

We’ve checked the custom CSS on our end, and it seems to be working as expected. You can verify this here: https://d.pr/v/xBqGOJ. Could you please add the updated Custom CSS below and check again?

.fg-layout-3-filters-wrap {
    margin-left: 400px !important;
}

#fg-layout-3-search-box {
    display: none !important;
}

Regarding your final query, constructing two layouts is currently unavailable. However, thanks for your suggestion. For different layouts on different devices, you can follow this guide: https://d.pr/v/vbYtCC

Hope this helps!
Thanks,

Hi,

I went with the Overlay option for the filterable gallery. I want to use a solid colour on hover instead of an opacity – please can you advise the CSS for this as I can’t seem to work it out.

Hi @bigtasty ,
Greetings.

Could you please check the CSS below and the demonstration here?

.gallery-item-caption-wrap .gallery-item-hoverer-bg {
width: 95.4% !important;
background: #B40505 !important;
opacity: 0.7 !important;
}

Please check and let us know how it goes.
Thanks

Hey,

Thanks so much, that works perfectly. The only issue I seem to be having now is when using my widescreen monitor a large gap is left between the items – any idea why this is?

Image here.

Hi @bigtasty ,
Greetings. Thanks for the confirmation.

Regarding your last query: We checked on a widescreen monitor but were unable to preview the gap issue. You can view it here: https://d.pr/i/FLFwEa. Could you please let us know the device configuration you used for your check? This will help us cross-check the issue from our end.

Best regards,

Hey. Your screenshot looks like it was taken on a standard size monitor – the issue only seems to appear when using a widescreen monitor (for example I’m using a Lenovo G34w-30, which displays at 3400px wide).

When the browser window is expanded beyond a ‘regular size’, the filterable gallery cuts down the image size by around 50%. I have attached a screenshot here.

This doesn’t seem to be browser specific, as I’ve tested on Chrome, Safari and Firefox and they all seem to suffer from the same issue. Any help would be appreciated.

Hi bigtasty

I hope you are fine.
Please use the following CSS to minimize the gap between gallery items.

@media only screen and (min-width: 2560px)? {
.elementor-element.elementor-element-984af70 .eael-filterable-gallery-item-wrap {
width: 33%;
}
}
Well, I tried to replicate the scenario using online tool, as that kind of wide screen is not available on my end, and this CSS seems working good, you can check here, https://d.pr/v/Y7Nspc Also, you may adjust the width percentage as per your need.

Thanks

Hi?@bigtasty?,

I hope you are fine.

We haven’t received any updates from you since then. Could you please provide us with an update?

Thanks!

Hi, sorry for the delay in response. Still no luck unfortunately with the CSS.

When the page is loaded on a standard screen to begin with and then the browser is stretched the gaps appear as in my screenshot. When the page is loaded with a wider screen it goes to a 3 column layout despite being set to a 2 column layout.

Hi @bigtasty ,
Greetings.

Sorry to hear that you’re still facing the same issue. Could you please try setting breakpoints for widescreen as shown here: https://d.pr/v/B0wtnf, and set the column to 3 to check again?

Additionally, we attempted to access your page URL, but it appears that the site is currently in maintenance mode. Could you please make the test URL live so we can investigate the issue thoroughly and assist you properly?

Best regards,

Hi @bigtasty ,

We haven’t received any updates from you in a while. Could you please share any updates when you get a chance?

We look forward to hearing from you.
Thank you!