'the grid' plugin category zoom

Support
#1

Hi,

We are using the grid plugin for our shop.

On mobile devices when selecting a category from the dropdown used within the grid, we noticed it causes the mobile screen to zoom in slightly and after selecting a category you have to zoom out manually.

Is there any fix on this?

Many Thanks

#2

Hi @j300bac,

Thank you for writing in, you have a lot of site associated on your account, would you mind providing us the site URL and login credentials in a secure note so we can take a closer look?

Thanks,

#3

Hi,

I have added a secure not above.

Many thanks

#4

Hello @j300bac,

We have tested your site on mobile. We could not replicate the issue. The page does not zoom in when selecting a category. Always remember to clear all caches (if you are using WP Rocket, WP SuperCache or W3 Total Cache) when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

And please clear your browser cache too. You may use private browsing mode in testing your site to make sure that you are viewing the latest codes from the updates and not the cached version in your browser.

Kindly let us know how it goes.

#5

Hi Rue Nel,

J here and I’m intervening because I don’t like my staff working on Saturdays. Kyle is new and doesn’t realise there is a possibility of getting a response from yourself whereby you will avoid giving an answer if you don’t understand the question.

Could you please forward this to Christian or @paul.r OR literally anyone else apart from the above? Over 24 hours because Friech couldn’t be bothered to read the secure note and you don’t know about the iphone zoom function related to font size. This isn’t why we buy lots of licences and counting. Many have gone to elementor because of this…

There are three of us here with iPhones experiencing the same issue - the VIDEO which is in the secure note is from one of our clients. Not even us. I find it strange that you are unable to replicate the issue…

See this post here solved kindly by Paul R with a similar issue on a contact form.

The php snippet broke our multisite when we attempted to use it on Pro.

There are three of us here with iPhones experiencing the same issue - the VIDEO which is in the secure note is from one of our clients. Not even us. I find it strange that you are unable to replicate the issue…

Anyway… if you can be bothered at all, like if it’s not too much trouble do you fancy allowing anyone who is willing to at least look at the issue we have here at hand here instead of sending generic responses to my staff costing themeco and ME time and money?

THanks for your consideration.

Kyle will be your point of contact from us again hereinafter.

#6

Hi @j300bac,

It’s indeed part of iPhone’s feature, any input with a smaller font size than 16px will cause zooming. And in your case, you’ll have to change The Grid’s styling, it’s based on active skin of your Grid. Please check this https://theme-one.com/docs/the-grid/#custom_css_js_code for information on how to apply a custom CSS.

The CSS that you may need depends on what class and skin is active. For example, this will be on my grid (not on your current site)

.tg-txt .tg-nav-font, .tg-txt input[type=text].tg-search {
font-size: 16px;
}

But, could you try adding this one on your grid’s custom CSS

.tg-nav-sqr-thick .tg-nav-font, .tg-nav-sqr-thick input[type=text].tg-search {
font-size: 16px;
}

Thanks!

#7

Hi Rad,

Thank you for getting back to us.

I have just tried the custom CSS within The Grid and although the font size changed it did not fix the issue of the zoom on iPhone.

Could there be a similar php snippet used to fix our problem like the one provided above for the contact form?

Many Thanks
Kyle

#8

Hi @j300bac,

I still can see it in 13px size

image

And the solution depends on where the issue is present so it may always vary. Especially that accessibility is needed for smaller devices, like for users that have a hard time reading and so they should zoom it in. And that PHP simply disable that zooming capability completely instead just fixing the part that has this issue.

I also tried checking your site in admin but couldn’t access the grid. Would you mind granting access to those resources and please let us know which grid?

And your site is optimized, I recommend disabling any cache feature from your site while we’re investigating. That is one of many possible reasons why CSS is not taking effect.

Thanks!

#9

Hi Rad,

The CSS you provided above has indeed worked for the search bar - However it has not worked for the category selector beneath it, we are still getting an input zoom when clicking on it.

Seeing as there is no input text on the selector do you have any idea of what is the best way to get around this issue?

Many thanks for your help.

All the best
Kyle

#10

Hi Kyle,

Please kindly add the CSS code below to Pro > Theme Options > CSS:

.no-touch .tg-dropdown-holder:hover .tg-dropdown-list, .tg-dropdown-holder:hover .tg-dropdown-list, .tg-dropdown-list.tg-dropdown-holder-animation{
    font-size: 16px;
}

That will force the Category and Sort select boxes to have a minimum of 16px font size. I used the Safari browser developer toolbar connected to my iPhone via the USB cord to find the correct selector and tested the code above.

Please kindly be aware that the behavior in question is not related to our theme. The iOS devices have the behavior when you set the font of a select box below 16 pixels and the iOS devices force the accessibility feature to zoom in. The font size for the boxes that you used was 13px and that is why it had the zoom-in effect.

You can read more about the method of debugging that I used here.

Thank you.

#12

Hi Christopher,

I hope you are well.

That has worked perfectly for the categories, thank you so much for your help it has been much appreciated.

All the best
Kyle

#13

You’re welcome, Kyle.

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.