Mobile Click Position / Size either much smaller than desktop or does'nt exist

Anonymous

#224560

I am having an issue with mobile ( iphone 6-10, Android and iPads ) where if I have a drop-down filter the button size will look the same as intended on desktop but the “clickable” area of the dropdowns are actually above the filter and much thinner than the button on screen. If I have two drop-downs, one to filter categories and one to filter tags, there doesn’t appear to be any clickable areas at all on the page. This is obviously not intended and I need to fix this issue ASAP, what can I do to figure out or solve this problem?

Anonymous

#224571

Update to this, the clickable size is effected even on desktop as long as the screen size is below 980px wide.

Trevor

#224580

You may need to set the dropdowns (in the field settings) to Comboxes, and then go to WP Admin -> Search & Filter -> Settings and change the combobox script to ‘Select2’ to see if that fixes it?

Please note that we are closed for the day as it is late here in the UK (8PM). I will get on this tomorrow.

Anonymous

#224593

Thanks for the response so late at night for you! I have tried this and unfortunately, this did not fix the issue at hand. For a reference point see pages below:

http://unwritten-fall.flywheelsites.com/assessments/entry-level/
This has one filter

http://unwritten-fall.flywheelsites.com/assessments/index/
This has two filters and doesn’t allow clicking at all under 980px

I think that there might be an issue with scaling? It feels like it scales the clickable area into a very tiny location the smaller you get.

Trevor

#224647

I have had a look at the HTML and CSS, and you have a (not uncommon) problem in that the divs that the form and results are in do have have correct heights, so the results div actually overlaps the form, hence you cannot click it. See the two divs in Divi marked here:

https://www.screencast.com/t/ng05DYnzn2nn

Can you see I have had to add Custom CSS to both? You may need to do the same in Divi, but it might need to be targetted only to mobile screen widths.

Divi allows you to add CSS classes to rows and columns (I think you need to use the column) and then you can use those classnames.

Anonymous

#224651

Thank you so much! This looks to have solved my issues!

Trevor

#224657

Thanks for letting me know. I will close this thread for now.

[Author]

Posts