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

still need help with bootstrap site not accepting mid-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.

1 Answer

Kamal Chaneman
Kamal Chaneman
6,546 Points

Try with move the min-width=1200px media queries to the top of min-width: 768px

Maximiliane Quel
Maximiliane Quel
Courses Plus Student 55,489 Points

yeah. unfortunately that just turns the issue on it's head. somehow only the bottom media query is accepted. it seems really strange.

Kamal Chaneman
Kamal Chaneman
6,546 Points

try change your media queries to this: //* MEDIA QUERIES // / Large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { .social-media-wrapper { margin-left: 33%; margin-bottom: 0.5%; } }

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

@media (max-width: 767px) { .social-media-wrapper { margin-left: 16%; margin-bottom: 0.5%; }
}

and your social media wrapper to this: .social-media-wrapper { margin-left: 33%; margin-bottom: 0.5%; }

Maximiliane Quel
Maximiliane Quel
Courses Plus Student 55,489 Points

that worked. weird. I thought bootstrap was mobile first?? honestly ... but thanks a lot!