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

Kyndel Dollison
Kyndel Dollison
3,109 Points
Posted by Kyndel Dollison
Kyndel Dollison
3,109 Points

I NEED HELP! My mobile site is coming up super skinny on mobile devices.

I built my portfolio website, and finally made it live last night. But I hadn't been able to test it on a real mobile device before that, and when I checked it, the site shows the mobile layout as a skinny strip down the middle. You have to zoom in to see it how it's supposed to be seen. But even then, I still have the unnecessary extra space on the sides of the screen. I don't know how to troubleshoot or debug mobile versions. It shows up fine on my desktop.

I used primarily HTML and CSS to build the site. The address is: www.kyndeldollison.com.

5 Answers

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

Kyndel, you'll want want to set your viewport meta tag within your <head>.

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

That should address the biggest issue you're seeing.

Kyndel Dollison
Kyndel Dollison
3,109 Points
Kyndel Dollison
Kyndel Dollison
3,109 Points

That worked! Thank you so much!

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

Kyndel, there are a few things I'd recommend with your code too...

  • Avoid visual styling using IDs, for example #lastParagraph {}, this creates issues with specificity and overwriting styles later on
  • If you wrap your content container into a class like .content_container, you can the use things like .content_container p:first-child {} and .content_container p:last-child {} instead of having to make extra items like #upperParagraph and #lastParagraph
  • Work on changing just what needs to be changed for each breakpoint in your code. See if you can simplify some of the CSS using relative or percentage-based sizing so you don't have to overwrite things each time. It'll make management in the future much easier

The visuals of your site look great and your understanding for media queries is a great start. Nice work with everything! Keep it going!

Kyndel Dollison
Kyndel Dollison
3,109 Points
Kyndel Dollison
Kyndel Dollison
3,109 Points

Thanks for your comments, I'm working now on converting the code to use wrappers and specific selectors, like you mentioned. I'm already seeing the advantage. :)

Laura Cressman
Laura Cressman
12,548 Points
Laura Cressman
Laura Cressman
12,548 Points

Hi Kyndel, First of all, what a beautiful site! You are clearly very artistic :) In terms of the skinny mobile issue, it is likely something to do with the margin and padding on your container element of the text. Do you have some sort of "wrapper" element? You might want to adjust these values to be smaller when the screen gets smaller through media queries. If you wouldn't mind sending me your code, I could try to look through it to help you further. Great portfolio though!

Kyndel Dollison
Kyndel Dollison
3,109 Points
Kyndel Dollison
Kyndel Dollison
3,109 Points

Hi Laura, thank you for your response, and your compliments to my website :)

I do have a wrapper element, and I've set the margin left and right to 'auto,' as a way of centering the layout. I'm not sure if this is the cause of the skinny mobile version or not. I'd be happy to send you my code, and very appreciative of your time to help me! Do you have an email I could send it to, or perhaps a Dropbox account?

Laura Cressman
Laura Cressman
12,548 Points
Laura Cressman
Laura Cressman
12,548 Points

Sure, how about lauracressman@mac.com? I am guessing the auto is the issue, try changing it to something else, like 5%, and see if that works?

Kyndel Dollison
Kyndel Dollison
3,109 Points
Kyndel Dollison
Kyndel Dollison
3,109 Points

I sent an email with my code. I tried changing the auto to 5%, and now the layout isn't centered.

Kyndel Dollison
Kyndel Dollison
3,109 Points
Kyndel Dollison
Kyndel Dollison
3,109 Points

I apologize, by the way, if my code is hard to read through. This is my first attempt at coding, so I don't have a real grip on how to organize things yet.

Laura Cressman
Laura Cressman
12,548 Points
Laura Cressman
Laura Cressman
12,548 Points

No worries, I'll look through it soon!

Laura Cressman
Laura Cressman
12,548 Points
Laura Cressman
Laura Cressman
12,548 Points

Just loaded it-I must sleep now but I will try to step through the code more in detail later. I think it might be helpful to continue to play with the margins, because my best guess is that some element has margins that are screwing things up. Sorry I couldn't figure it out at first glance, but I'll keep trying!

Kyndel Dollison
Kyndel Dollison
3,109 Points
Kyndel Dollison
Kyndel Dollison
3,109 Points

Tim Knight answered it for me, and it worked :) now the only problem I'm having is that my horizontal view on mobile devices is showing the vertical layout. But that's for a different day. Thanks so much!