I have this basic card flip web page and want to resize the 'card' for several media queries.
It works on a PC in browser, but not on the actual devices themselves. Each test device shows the 'green' (tablet landscape) view, even when it shouldnt. Media query CSS can be found at the bottom of the CSS file referenced in the document head (url below).
The breakpoints are as follows;
- Mobile portrait(red)
- Mobile landscape (orange)
- Tablet portrait (yellow)
- Tablet landscape (green) *shows on all test devices below
- Desktop (blue)
- Large desktop (purple)
Im testing on; iPhone 6S, iPhone 7, iPad mini 4, iPad Pro 10.5
But as i say all the above, regardless of orientation are showing the Tablet Landscape (green) view and i cant see or figure out why the media queries which work great on PC, are not being applied on-device.
The web page is here: http://plot64.com/nhap/
(On a seperate note, anyone with a method on how I can set an identical and locked 1:1 ratio width & height on the 'card' please post. I've had to switch to fixed pixel widths, per media query 'view' as I couldnt find a way to maintain the 'square' look using percentage values while maintaining the 'flip' feature animation.)
Thanks guys!
