I am looking for some help with responsive design for iPad pro. The iPad pro resolution means that it sits in the smallest desktop breakpoint.
I have added the next breakpoint up for larger desktop sizes, so the devices in the small desktop breakpoint are:
Retina MacBook 12"
MacBook Pro (earlier 13" models)
iPad pro 12.9"
Galaxy Tab S3
Surface Pro 3 (Portrait)
The issue I have is that I have dropdowns in my navigation that I want to function as hover dropdowns on the MacBooks but this doesn’t work for ipad since it takes you to the top level landing page without showing the options in the dropdown, therefore adding an extra step in the user journey which I’d ideally like to avoid.
Is there a way to use custom media queries to include the touch devices within this small desktop breakpoint within the iPad breakpoint therefore using the iPad styling?
Or is there a way to add custom code of some sort to push the macbooks into the next breakpoint up so only the touch devices are in this breakpoint?
Apologies if this is a stupid question, but would hugely appreciate any help
Website is currently in development…
Here is my site Read-Only: https://preview.webflow.com/preview/ocean-orthodontics?utm_medium=preview_link&utm_source=designer&utm_content=ocean-orthodontics&preview=79bda87c5fcdafa53abc5ca63b99eaa1&pageId=5f01c41514696c9609432e70&mode=preview