Disable Automatic Zoom for Search

Hi there @chrisalton11 ??

It seems that Storefront has an automatic feature that zooms in on mobile when using the wordpress search bar.

This also applies to third-party search plugins like FiboSearch and IvorySearch.

We find it very frustrating because it hides ajax search results from displaying properly and forces the user to pinch-zoom-out every time they want to see the full page correctly displayed again.

Is there a way to disable this feature?

Kindly note that displaying ajax search results is not part of the default Storefront theme functionality; rather added, using plugins like the ones you mention.

As seen in the screenshot linked here, the search button/functionality that Storefront enables on mobile can be found in the bottom strip of icons; and using it to perform searches on the site at https://shopcarolina.org I could see any ajax results.

Feel free to reach out to the respective support forums of FiboSearch and Ivory Search for more on how to further customize the search results display on the front end.

• This reply was modified 2 years ago by anastas10s. Reason: typos

Hi Pepe,

It’s not the ajax that’s an issue, it’s the auto-zoom.

When I click inside the default search bar (the one in the screenshot you linked – WP Bottom Menu), the screen automatically zooms in and cuts off other portions of the page.

Do you see / experience this on mobile? I can provide more details if you still don’t understand the auto-zoom feature I’m trying to describe.

Thanks,
Chris

Hello @chrisalton11,

Just to make sure we’re on the same page here, you want to remove the part in the screenshot below when someone clicks on the search icon in the mobile view.

Link to image: https://i.imgur.com/7vHJQhX.png

You can just hide it with some CSS code:

/* Remove the search pop-up of the theme on mobile device */
@media only screen and (max-device-width: 480px) {
   #wp-bottom-menu-search-form-wrapper{
  display: none;
}
}

The code above should go in Appearances > Customizer > Additional CSS.

Hope it helps!

Hi Saif,

I apologize for not explaining better. I’m including a WeTransfer link that shows 2 photos: https://we.tl/t-2w2AE1H4xg

The first photo shows the search bar looking the same as the screenshot you sent.

The second photo shows how the screen automatically zooms in once someone clicks inside the search bar. This is how the screen looks on mobile.

I’m trying to disable the effect that causes the zoom-in.

Does that make more sense?
Chris

Hi there @chrisalton11 ??

I’m trying to disable the effect that causes the zoom-in.

Does that make more sense?

Thanks for clarifying further. From what I gather, the ShiftNav plugin is used, among others.

For comparison reasons, here is what a site with only WooCommerce and Storefront theme active looks like. Notice that the menu in the bottom, in the mobile viewport is not the same with the one at the site at https://shopcarolina.org.

Therefore, I suggest you get in touch with the respective plugin developers that enable that functionality currently in use at https://shopcarolina.org, as this appears to be outside the scope of support here. Feel free to review the Guide for using the Storefront forum.

I trust that points you in the right direction, but if you have more questions, let us know. We’re happy to help.

Hi Pepe,

Thanks for trying to help but the support team is still misunderstanding the problem. This has nothing to do with ShiftNav or other plugins.

If I use IvorySearch, FiboSearch, ShiftNav, WooCommerce regular search… it doesn’t matter… all of them have an auto-zoom feature that happens when you click inside the search bar on mobile.

Do you have a mobile phone you can use to test what I’m speaking about? All of your screenshots are from “mobile view” on a desktop. If you could check on an actual mobile phone, it would be very easy to explain/understand the feature I am describing.

Does that make sense?
Chris