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 Sandra Murphy
Sandra Murphy
Courses Plus Student 101 Points

Media query?

My font remains massive even thought I've added media queries. This is my code and I've added to header.php also, what am I missing. The font is huge on mobile and goes off screen.

/* Media Queries ------------------ */
    @media (max-width: 1024px) {
    .primary-content,
    .secondary-content {
    width: 90%;
    }
}
@media (max-width:768px) {
.primary-content,
    .secondary-content {
    width: 100%;
    padding: 20px;
    border-top: none;
    }
.main-header {
    max-height: 380px;
    padding: 50px 25px 0;

}
    .title {
    font-size: 1rem;
    border: none;
}
    h1 {
    font-size: 5rem;
    line-height: 1.1;
    }
    .intro {
    font-size: 1rem;
    }

1 Answer

Nathan LaBrake
Nathan LaBrake
24,088 Points
Nathan LaBrake
Nathan LaBrake
24,088 Points

Hey Sandra,

Which font is appearing large? Is it all the text or just the h1 tag?

I would need to see the CSS that appears above this media query to know for sure, but what can happen with CSS media queries is that if you wrote, for example, something like h2.title { font-size:xxxem;} in your main CSS, then .title in a CSS media query wouldn't overwrite it.

Also, 5rem seems large for mobile. But again, I would need to know which text is appearing large and some of the code that precedes the media queries.

Nathan