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 uworlds
uworlds
1,784 Points

Screen not filling to capacity on all devices

Hi Fellow Treehousers,

I am just testing out my Web course on a new Web site called http://codebluerecruitment.com.au/ but am a bit confused as to why it is not scaling to fill screens to look proportional on various devices e.g. iPhone, Android tablet, laptop. On mobile devices it seems to let you scroll left and right into white space which contains nothing so I would like to disallow right and left scrolling when there is no content.

The margins and width percentages that I have selected don't seem to be doing the job so not sure what I am doing wrong?

Any help will be greatly appreciated.

Best regards, Michael

3 Answers

mobilesuitcake
mobilesuitcake
7,493 Points

I tried the emulation feature on Chrome Dev Tools and your website fits the screens of devices just fine, so I'm not sure what's up.

You might want to add in the following tag into the head of your HTML::

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

This usually fixes things for me.

uworlds
uworlds
1,784 Points

Hi Max,

Thank you so much for this!

I actually remembered that line of code from the lessons just before I went to bed last night, and added it, and it worked perfectly. I am sorry I meant to update this forum to say that I did that ... but fell asleep straight after.

Have a great day.

Best regards, Michael

Amber Cookman
Amber Cookman
12,662 Points
Amber Cookman
Amber Cookman
12,662 Points

Not sure if you've changed the site since posting this, but when I pull it up on my laptop and re-size the screen, and then when I visit the site on my phone and tablet, I don't have any ability to horizontally scroll. (Visited on Chrome using a Macbook Pro, on both the Chrome and default Internet browsers on a Galaxy S4, and on Chrome on a Galaxy Tab 4).

What devices/browsers are you seeing the issue on?

uworlds
uworlds
1,784 Points

Hi Amber,

Thank you so much for your confirmation.

You know, I never even considered clearing cache & cookies as I am kind of new to iPhones but I have cleared these and sure enough ... the CSS changes which I made before are now in effect and my problem (which I guess was fixed before I posted really) is now truly fixed! Your reply made me think of this.

Many thanks for letting me know, and nice to meet you.

Best regards, Michael

uworlds
uworlds
1,784 Points

Hi Amber,

I was wondering if you may how how to scale up my text so that it fits each screen in a reasonable and readable size?

At the moment on the iPhone the text is microscopic, even though I have set my CSS to be a large percentage. I would have expected it to scale to whatever width on all devices?

Kind regards, Michael

Fatimah Sahid
Fatimah Sahid
3,188 Points
Fatimah Sahid
Fatimah Sahid
3,188 Points

Hello Michael,

Have you tried body{ max-width: 100%; } ?

I hope you find the suggestion useful.

uworlds
uworlds
1,784 Points

Hello Fatimah,

Thank you very much for that, I did give that a try but it seem the clincher was to also add <meta name="viewport" content="width=device-width, initial-scale=1.0"> which made it look great on iPhone and my tablet.

Many thanks and nice to meet you.

Cheers, Michael