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 Philip Wilkinson
Philip Wilkinson
2,273 Points

jumbotron header text doesn't shrink on mobile devices

The problem I have with this is that when you try and show the jumbotron on a mobile screen - the display 2 text is far too big. How do you get it to change down a font when using smaller screens?

1 Answer

Dragos Ionita
Dragos Ionita
6,980 Points
Dragos Ionita
Dragos Ionita
6,980 Points

Do you know about css media queries? they allow you to change styles depending on screen size and things like that.

@media (max-width:650){
   .text {
      font-size: 16px;
   }
}

where .text is the selector to your text, and font-size:16px is your new font size that gets activated when the screen size is less than 650px.

if it still doesn't show smaller on mobile devices, remember you have to use the meta tag in your html file to accept different device pixel densities

<meta name="viewport" content="width=device-width">