Category only display; Unwanted zoom on mobile

Hi @xmarksthespot

Thank you for your kind words.

1. You can exclude products by using this code snippet:

add_filter( 'dgwt/wcas/search_query/args', function( $args ) {
	$args = [];
	return $args;
} );

You have to paste the following code samples into functions.php in your child theme or use the Code Snippets plugin.

Then remove the “See all products…” link by this CSS:

.dgwt-wcas-st-more {
    display: none !important;
}

Paste it into Appearance -> Customize -> Additional CSS. If you aren’t familiar with custom CSS, take a look at this video.

2. You can decrease the mobile breakpoint for example to 1px in WooCommerce -> FiboSearch -> Search bar (tab) -> Layout -> Breakpoint option. This will avoid FiboSearch showing overlay and the desktop input will remain.

Regards,
Kris

@c0nst – thank you for your reply.

On 1, thank you, this works

On 2, this does not solve the problem. Just to clarify, the problem on mobile (I’ve only tested iphone) is that when I tap the desktop-style search box, it zooms in on the search box and presents the keyboard. The keyboard is expected but the zooming makes the site width wider than the viewport and presents an unwanted horizontal scrollbar.

However, if I use a normal WP search box the keyboard is presented but the zooming does not occur.

See for yourself on mobile on the link I provided earlier. Below the header is a fibosearch search box on the left and WP search box on the right so you can compare.

@c0nst – since my last post I’ve stumbled across this thread, which may be relevant:
https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone/

It seems as if Safari (and maybe other browsers?) will zoom if the font-size is less than 16px. Your default css specifies font size of 14px.

So as a ‘fix’ to disable unwanted zoom on focus I’ve added the following to the ‘Additional CSS’ section of my theme:

.dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
font-size: 16px;
}

I’m not a developer, and I appreciate this may not suit everyone, so I’m wondering if you have a better solution?

• This reply was modified 2 years, 7 months ago by xmarksthespot.

Hi @xmarksthespot

You can try this code:

add_action( 'wp_head', function() { ?>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<?php }, 9999 );

You have two ways to add this code to your theme:
Open the functions.php in your child theme and add the code at the end.
or install the Code Snippets plugin and apply this code as a snippet.

Alternatively, you can force a 16px font-size in the FiboSearch input.

.dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
	font-size: 16px !important;
}

and also you can try this CSS:

* {
 -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

Regards,
Kris

Thank you for confirming (in your option 2) that what I had already done is an acceptable solution.