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 joshuamudge
joshuamudge
696 Points

My website has tiny text when viewed on a tablet or phone in potrait mode.

I'm having a trouble with my website looks good on desktop, laptop and tablet and phone in landscape but in potrait on tablet and especially on phones the text and navigation is tiny. Using a desktop browser scaled to the same or smaller size in potrait works fine and still looks good and the text is big enough. Website: https://mc.livetolearn.org/thw4/ Code: https://mc.livetolearn.org/thw4.zip

4 Answers

joshuamudge
joshuamudge
696 Points

This has been resolved with the section: "Responsive Web Design and Training".

Shaun Moore
Shaun Moore
6,301 Points
Shaun Moore
Shaun Moore
6,301 Points

Try something like this:

@media (max-width: 600px){
font-size:22px; (OR YOUR OWN SIZE)

}
Edgar Cesar Martinez Bazarte
Edgar Cesar Martinez Bazarte
4,807 Points
Edgar Cesar Martinez Bazarte
Edgar Cesar Martinez Bazarte
4,807 Points

Hi, try to use in the <head> the <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">.

joshuamudge
joshuamudge
696 Points
joshuamudge
joshuamudge
696 Points

The problem still persists, here is a screenshot: https://mc.livetolearn.org/thw4/est.png Notice how small the navigation is compared to the images. A desktop browser sized to phone size or smaller has the navigation big enough for a phone: https://mc.livetolearn.org/thw4/estd.png