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

CSS

Do Media Queries Lag THIS Much Always?

I am trying to make a mobile-friendly version of my website so I can upload it by the end of 2019, but the more I work on it it just gets closer to being impossible!

I haven't even been able to make the navbar without having an insane amount of lag as I test the site. I am testing in Chrome. I tried different methods such as the device toolbar on responsive option, and on iPhone+ option (The phone I have at hand to test the page). I work on the actual chrome site, and everything seems to be looking properly. Once I upload to the server and test it, It looks insanely different. I searched online and found out I hadn't put this meta tag...

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

I thought this would solve the problem, but it did nothing at all on mobile! It solved the problem for Desktop Chrome, but it doesn't solve anything if it won 't work on mobile! I kept on looking for a solution to the problem and came to realize the site looks different on chrome an safari on the iPhone. Not only that, but the mobile chrome on iPhone looks completely different than the responsive iPhone + look on desktop Chrome.

I am going insane! I kept on looking for anything else I could be doing wrong, and I found out that the CSS works on Mobile only if it's in the head of the HTML document in a <style>. No idea how and why this worked. Again, it worked on my iPhone, but it's different than what the chrome dev tools responsive tool shows.

I came to an uncertain conclusion that Chrome responsive dev tool is not a good way to test the site for it to eventually work on the iPhone so I just resizing the actual chrome window. However, I cannot go below 500 pixels in width therefore, I can't use that option to test for mobile. I am working on a MacBook Pro 13 and I have no idea if the retina display could also be interfering with the whole process.

I also came to the conclusion that if any iPhone user will be going on my site, more than certainly they would use safari so working on chrome would be useless if my target audience are iPhone users no? Well, I investigated further just to find out I can't resize the safari window less than 504px, and safari doesn't have the handy resize dev tool.

I am running out of ways to solve this problem and I am going berserk. I would greatly appreciate any help/suggestions because I am stressed out at the fact I won't be able to get this done before the end of December. Thanks in advance!

1 Answer

Here is a stack overflow on resizing Chrome below 400px.