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

Posted by Daniel Kang
Daniel Kang
1,745 Points

Mobile responsiveness issues. Works fine in workspace, not in real-life?

Hi everyone,

I just finished the first part of the front-end dev course, and I've uploaded my site to a host&domain in real life with the code copied verbatim from my workspace.

When I preview the site using my smartphone and workspace, the website is responsive and the sizing is perfect. However, when I take the exact same code and try deploying it on my website, it comes across as a normal desktop version of the site and not as a mobile version across different mobile browsers. The text is too small, my contact, about, and portfolio page info appears side by side instead of an easy scrolling mobile version. I tried making changes to CSS styles, the viewport and others but nothing seems to be working.

Here's my code: https://w.trhou.se/xz5c1l54j4

Why is this happening?

Faisal Rahimi
Faisal Rahimi
4,019 Points

Hi Daniel, try the following; 1- on top of your pages bring meta viewport last after css. 2- Add media queries in your responsive.css.

hope that helps.

Daniel Kang
Daniel Kang
1,745 Points

I just realized that I forgot to copy&paste the correct responsive.css file into my workspace. This should be the right one!

https://w.trhou.se/xz5c1l54j4

2 Answers

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

It might help if you post a link to the website where the problem can be seen. But offhand, it sounds like your media queries aren't operating on the website.

This could be a server configuration issue that you would need to discuss with your website service provider.

Daniel Kang
Daniel Kang
1,745 Points

I just realized that I forgot to copy&paste the correct responsive.css file into my workspace. This should be the right one!

https://w.trhou.se/xz5c1l54j4

Daniel Kang
Daniel Kang
1,745 Points
Daniel Kang
Daniel Kang
1,745 Points

Okay, that was weird. I'm currently hosting my site using Github pages, and I set my URL redirect to go to the github page. When it does that, it's mobile responsive, but when it stays on my original URL, it's not mobile responsive. I've decided to just give up using my original domain URL and use the github URL directly. Weird stuff!