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 Jack McDowell
Jack McDowell
37,797 Points

CSS help when viewing page on mobile devices

I need some help with the way one of my webpages is acting when viewed on mobile devices. The whole website looks fine except for that one page. If someone could help me fix the CSS I would greatly appreciate it. My website is http://jacksworkspace.com and the page with the problems is http://jacksworkspace.com/code/codes.php It's based on the t-shirt store so if you took that php course it might be easier to follow along. Also, you can download a copy of most of my website here. Thanks in advance, Jack

geoffrey
geoffrey
28,736 Points

What's the exact issue ? For me, the website isn't responsive at all, even when looking at the others pages. The website doesn't get adapted according the viewport's width.

Jack McDowell
Jack McDowell
37,797 Points

Hey Geoffrey. The design is currently not responsive except for the contact page. The problem is that the code page, when viewed on a mobile phone (android or iphone) appears zoomed in. And when you zoom out, the header bar only occupies the original rendered size instead of covering the entire screen (the elements in the body that were over zoomed). If you go to the page I mentioned in the question you will see what I mean immediately, as it's the only page that does it. Bottom line is, I would like to fix this one problem before I work on making the whole design responsive.

1 Answer

Mark Filter
Mark Filter
32,718 Points
Mark Filter
Mark Filter
32,718 Points

Jack, I do not see you using any media queries beyond checking for a retina display equipped device, nor do I see any responsive web design functionality designed into the CSS. I would consider enabling flexbox for your divs and allowing the div content to wrap.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Jack McDowell
Jack McDowell
37,797 Points

Hey Mark, thank you for taking the time to look at my code. The only page that is responsive at the moment is the contact page, and this is achieved through a separate style-sheet. Thank you for the flexbox tip, I was looking for something like that for making the website more responsive.

However, I was hoping to fix this seemingly simple issue before doing some housekeeping on the code in general and then adapting the site to mobile platform better (I know, I know, it should have been the other way around).

What really puzzles me is that I have unordered lists on other pages that don't exhibit the behavior. I even re-did the css from scratch for the code page taking it from the lightbox ul to hope that it would work, and the problem persists. (The old stylesheet in the css folder of the rar file is organized differently and should have this original code that also caused this error blacked out).