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
Jack Cummins
17,417 PointsIn CSS can you change the text for larger screen sizes using Media Querries?
I was just wondering because I'm making a website that would be a lot better with that feature. If you know how than please tell me.
Thanks so much in advance, Jack
19 Answers
pat barosy
6,759 PointsA couple ways to do this. I’d probably use JavaScript or jQuery. With CSS I’d try to use a classes for the different text you want to change, then at the specific screen width I’d use display:none to hide the text I want to change & display: block to show new text (can do this in reverse order for the smaller sizes too)
pat barosy
6,759 PointsHi Jack, If you mean increasing font-size as the screen size gets larger... then yes, you absolutely can. You’ll have to see at what breakpoint or screen size you want to increase the text, then just code the font-size you want into that specifics media query.
Jack Cummins
17,417 PointsI meant changing the text. Not changing the size of the text. Is there any way to do that? If so, how?
pat barosy
6,759 PointsNo worries,
Let me know how it works out. If display:block doesn’t work, use display:inline-block
Jack Cummins
17,417 PointsI did something a bit different, but it worked out well and without you I would not have had the idea!
Thanks so much!
pat barosy
6,759 PointsGlad to hear that it worked out!! Appreciate that
Jack Cummins
17,417 PointsIt worked out really well.
Thanks So Much Pat! Jack
pat barosy
6,759 PointsI’ll admit that I’m a bit curious about knowing your solution. Maybe it can help some other students as well. I can still remember the days when I had NO idea what I was doing lol Glad that I could help
Jack Cummins
17,417 PointsThanks so much!
pat barosy
6,759 PointsThanks for sharing. Link redirects to “page not found” . Tried it on my mobile device. Will try in desktop when I get home.
Jack Cummins
17,417 PointsI'm sorry, the URL must have changed. The Website looks like this. I hope the URL of the website didn't change. [The code](view-source:http://port-80-kk0ufrkcxw.treehouse-app.com) is here. I hope that URL didn't change.
Jack Cummins
17,417 PointsThey both didn't work again! I guess I'll give you my code here.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSS/style.css">
<link href="https://fonts.googleapis.com/css?family=Changa|Kanit|Martel|Martel+Sans" rel="stylesheet">
</head>
<body class="home">
<nav>
<ul id="nav">
<li class="link not-showing chosen"><a href="Webpages/about.html">About</a></li>
<li class="link not-showin chosen"><a href="Webpages/about.html">About Me</a></li>
<li class="link not-showing chosen"><a href="Webpages/coding.html">Coding </a></li>
<li class="link not-showin chosen"><a href="Webpages/coding.html">Coding Experience</a></li>
<li class="link not-showing"><a href="Webpages/contact.html">Contact</a></li>
<li class="link not-showin"><a href="Webpages/contact.html">Contact Information</a></li>
</ul>
</nav>
</body>
</html>
CSS:
@media (min-width:800px){
.not-showing{
display:none;
}
}
@media (max-width:800px){
.not-showin{
display:none;
}
}
That's not all of my code, it's just the code that you need to see. Thanks for helping me with this! Jack
pat barosy
6,759 PointsGreat job!! One question though. Any reason you didn’t use 801px for min-width breakpoint to prevent any overlap in the media queries? Again, great job!!
Jack Cummins
17,417 PointsThanks for the advice! Also, that was not my full code. I only included the ocde that you needed to see. Thanks for giving me my idea!
Jack
pat barosy
6,759 PointsNo problem. Keep up the good work!!
Jack Cummins
17,417 PointsWhich coding language are you curently learning about?
pat barosy
6,759 PointsI’ve danced around a few for the last couple of years but never really used them for anything more than personal knowledge. Now I’m refreshing what I know (HTML, CSS, Bootstrap, JavaScript, jQuery) in hopes of going freelance & launching a startup. Wordpress, is probably next on my list. How about you?
pat barosy
6,759 PointsNice!!! A fellow front end web dev. You’re definitely well on your way. Mobile is something I should start thinking about as well. Here’s to reaching our goals.
Jack Cummins
17,417 PointsWow! I'm working on front-end Web Development, after I finish that I'll do Java. After that Python. And after that I'll do WordPress. Then I'll start learning ios and android. After that I'll put all of my learning into action.
Jack Cummins
17,417 PointsOkay, I'll try mobile. What does it do?
pat barosy
6,759 PointsNo, I meant that I should start getting familiar with learning development for iOS and Android as well.
Jack Cummins
17,417 PointsOh. I'm not going to be doing that for a while.
Happy Coding, Jack
Jack Cummins
17,417 PointsJack Cummins
17,417 PointsI'm gonna try it with CSS. I don't know jQuery or JavaScript.
Thanks for the help! Jack