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!

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

HTML How to Make a Website Debugging HTML and CSS Problems How to Fix Problems with Code

Riccardo Venturini
PLUS
Riccardo Venturini
Courses Plus Student 4,924 Points

Issue with mobile devices testing

Hello, I have done the website and works very well in desktops and tablets, even in mobile phone devices when i tried the screenshots diagnosis but when I opened into my Iphone5 the website appear as will in a desktop without resizing itself as should. What the problem may be? thanks for help

Riccardo

10 Answers

What technology you use for detecting the device? Can I get the url to your page? :)

Riccardo Venturini
PLUS
Riccardo Venturini
Courses Plus Student 4,924 Points

http://riccardoventurini.com/, that is my URL. I don't understand what you mean about the technology I used? thanks

You're right, I just finished that course, and never tried it on my Iphone 4s. Just tried it and it's not resizing. I am currently taking the CSS foundations Deep Dive and I am in the middle of the Device Specific Media Queries part of the course. I suspect that this will solve the problem. Apparently, retina display devices double the pixels, so a 480px screen will actually show 960px. I'm not sure yet how to solve this, but will post if I find the answer!

Riccardo Venturini
PLUS
Riccardo Venturini
Courses Plus Student 4,924 Points

Thank you Diane, I will really appreciate if you could help me when you can... Kind regards

Hi, I added this code to the css file: @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-resolution: 144dpi) {

#primary { width: 50%; float: left; } #secondary { width: 40%; float: right; } } This allows for the doubled up pixels on your retina display like I mentioned above. I had to put the code into codepen to do this, the treehouse workspace would not work. Hope this helps, Diane

Riccardo Venturini
PLUS
Riccardo Venturini
Courses Plus Student 4,924 Points

Hello Diane, Thanks for your help but for some reason the code you gave me did not work, then I found a solution....I did not put a viewport into the head of the document so I add it: <meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" /> and now it works just fine. Thank you for your interesting and I hope in the future I could help you as well Regards Riccardo

Riccardo Venturini
PLUS
Riccardo Venturini
Courses Plus Student 4,924 Points

That is the code I added... <meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />

Riccardo Venturini
PLUS
Riccardo Venturini
Courses Plus Student 4,924 Points

there you go "<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />"

Riccardo Venturini
PLUS
Riccardo Venturini
Courses Plus Student 4,924 Points

So sorry but for some reason I cannot write any code in here , everytime i tried it called itself!!!!

Thank you!