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 Maximiliane Quel
Maximiliane Quel
Courses Plus Student 55,489 Points

bootstrap site not accepting medium range media queries

Hi,

I have build this maintainance page using bootstrap and the social media buttons are supposed to have a different left margin for different screen resolutions. website

I have set

.social-media-wrapper {
    margin-left: 16%;
    margin-bottom: 0.5%;
}

which it takes for the extra small screens as expected

then I set the following media queries

/* Small devices (tablets, 768px and up) and Medium devices (desktops, 992px and up) */
@media(min-width: 768px) { 
    .social-media-wrapper {
        margin-left: 27%;
        margin-bottom: 0.5%;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media(min-width: 1200px) {
    .social-media-wrapper {
        margin-left: 33%;
        margin-bottom: 0.5%;
    }
}

but it will only always accept the bottom media query not the first one. when I take out the first one it doesn't properly display the last one either. I wanted to fiddle with the bottom margin as well at some point but I need to figure out why it doesn't take the first media query. I don't really understand why it behaves this way. anyone got any ideas?

I'd really appreciate the help.

4 Answers

Maximiliane Quel
Maximiliane Quel
Courses Plus Student 55,489 Points

answer was given in this post link.

Ana Camelo
PLUS
Ana Camelo
Courses Plus Student 13,218 Points
Ana Camelo
Ana Camelo
Courses Plus Student 13,218 Points

Maybe you forgot typing the media query in a complete way so it understands it is the screen size what you are making a reference about:

@media screen and (min-width: 768px) { ..... }

Ana Camelo
PLUS
Ana Camelo
Courses Plus Student 13,218 Points
Ana Camelo
Ana Camelo
Courses Plus Student 13,218 Points

Maybe you forgot typing the media query in a complete way so it understands it is the screen size what you are making a reference about:

@media screen and (min-width: 768px) { ..... }

Maximiliane Quel
PLUS
Maximiliane Quel
Courses Plus Student 55,489 Points
Maximiliane Quel
Maximiliane Quel
Courses Plus Student 55,489 Points

I don't really care about the media type. I want it to be for the small and medium pixel range which should be >=786px and <1200px. and adding all or screen doesn't help. but thanks.