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 Falk Schwiefert
Falk Schwiefert
8,706 Points

CSS: Resizing an element in media queries

I am fiddling with a project at the moment and I am running into a problem with media queries.

Basically I start designing from smallest viewport up but instead of making the content bigger, I want to make it smaller as the viewport becomes bigger. However, this seems not to work.

The only workaround I found is creating a min-width and max-width query, but that only works for the first one.

Is there a way to make CSS understand that the new width should be applied?

Here is the code:

<div id="background">
    <h1>My name is Falk. I am a solution oriented entrepreneur from Portland, OR.</h1>
</div>

/****************************
SMALLEST VIEWPORT
****************************/

div#background {
    width: 100%;
    height: 200px;
    background-image: url(../images/placeholderBackground.jpg);
    background-position: 20% 20%;
    background-attachment: fixed;
    text-align: center;
}

div#background::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

div#background h1 {
    color: white;
        width: 90%;
    font-size: 1.2rem;
    display: inline-block;
    vertical-align: middle;
}

/****************************
ABOVE 480
****************************/

@media screen and (min-width: 481px) {

    #background h1 {
        font-size: 1.4rem;
        width: 70%;
    }
}

/****************************
ABOVE 860
****************************/

@media screen and (min-width: 861px) {

    #background h1 {
        font-size: 1.6rem;
        width: 50%;
    }
}

When I check the dev tools, I see the style passed into the project but the applied style is the one from my smallest viewport size. The only way around that I see right now is to do min-width && max-width media queries but then then code gets crappy real quick and I feel it also goes against the concept of css since this would effectively disable the cascade, wouldn't it?

2 Answers

Jake Lundberg
Jake Lundberg
13,965 Points

It's because in your smallest viewport size, you used: 

div#background h1 {...}

and everywhere else you used: 

#background h1 {...}

Because of the rules of specificity, your smallest viewport is over-riding the other styles because it is more specific. Just remove the "div" from "div#background h1" in your smallest viewport and it should work fine.

Falk Schwiefert
Falk Schwiefert
8,706 Points
Falk Schwiefert
Falk Schwiefert
8,706 Points

Thank you very much. That worked and I should have thought of that myself. Making sure to stay consistent in that in the future.