I’m developing a new web site, and using media queries in what I hope is the approved manner, for the ‘mobile’ version. I have a problem with a form, where easily mouse clickable check-boxes on desktop machines need to have greater spacing to allow finger-poking on tablets and phones.
Given the high resolution of tablets now, how can I distinguish between desktop and tablet and so adjust the spacing on my form ?
You can create a media query that targets general tablet screen sizes. In other words, screens larger than mobile but smaller than your average desktop.
Those screen sizes are generally tablets.
I moved your thread to the CSS forum since this is more appropriate there? Not sure why you made it in the PHP forum 
.
Thank you for your reply.
There seems to be an overlapping region between desktop/laptop and tablets:
My nemesis is a mini iPad which I’m told has a resolution of 1024 x 768 (slightly narrower, but the same height as my laptop).
I can reasonably cope with that if it’s used in portrait format, but not in landscape. My test user is complaining bitterly.
It’s just going to be worse with larger tablets.
What’s your webpage you are working with? We can help get it sorted.
The site is holiday mull. Under the banner image there’s a block of four images on the right. Click the one labelled ‘Where to stay’ A Search box will pop up on the left (this assumes a large screen device, layout is different on tablet).
It’s the vertical spacing of the items in this box that is causing me a problem. Not of course the actual media query, but the level at which to create the extra spacing to allow finger-poking. Currently that’s set to 48em.
My current thinking is that I’ll have to set the media query at 64em (1024px).
I’m also aware that the page is a mess with older Android devices. I’ll be working on that next. The probable cause is my use of flex-box.
Frameworks seem to have a pretty good grasp at exactly what sizes to use for media queries. Take a look at how foundation has their sizes set up.
I follow these sizes and have never had an issue.
Thanks, I’ll follow that up.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.