Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Charles Franklin
17,535 PointsiPad and iPhone Media Queries
I know this is probably a CSS problem more than anything but I followed the instructions on this tutorial and deployed the website, with a few changes to my own domain.
My domain works great on my desktop. The breakpoints work fine. But when I go to my domain on my iPhone I get presented with the desktop version. The Media Queries seem to break... I took the CSS class and I think I remember there were special rules to apply for mobile devices, outside of the min-width rules... Am I right? What I don't get is why the breakpoints work good in a desktop browser but not mobile...
chip
2 Answers
Daksh Shah
3,534 PointsHi Charles!
I always adopt a different technique than targeting specific devices. You should always ensure that your website looks good at any window size. This can be done easily using Google Chrome. Maximize the window and slowly go on making it smaller. The point at which your layout becomes something you don't want, you add CSS rules for that specific max-width. To view the windows size while resizing in pixels, press F12 and then resize. You'd see a pixel width & height displayed on the top-right corner :)
However, if you want to target only iPad's and iPhone's, you can visit Stephen's blog where he has listed out specific media queries for all iOS devices.
Hope I helped you with your query.. Happy learning !
Charles Franklin
17,535 PointsAs always, this place continues to amaze me... Thanks Daksh!
Daksh Shah
3,534 PointsThis place continues to amaze me too Charles ! You're most welcome :)
James Barnett
39,199 PointsJames Barnett
39,199 Points>To view the windows size while resizing in pixels, press F12 and then resize. You'd see a pixel width & height displayed on the top-right corner :)I totally didn't know that was a feature of Chrome now.
mind blown
James Barnett
39,199 PointsJames Barnett
39,199 Points>I always adopt a different technique than targeting specific devices. You should always ensure that your website looks good at any window size.+1 great advice
Daksh Shah
3,534 PointsDaksh Shah
3,534 PointsThanks James ;)