Search code examples
cssresponsive-designmedia-queries

Media Query Not Working With Larger Viewport Sizes

I have a set of social media icons at the top of my sidebar: outtacontext. But I'm having trouble positioning them in the right place at different viewport sizes. Actually, it's working for all the smaller viewports but the positioning is off for the larger screens.

Here's my main css for this positioning:

#top #sidebar_bg .social_bookmarks {
position: absolute;
right: 69px;
z-index: 152;
margin-top: 102px;
}

@media only screen and (max-width: 989px) and (min-width: 768px){

#top #sidebar_bg .social_bookmarks {
right: 33px;
margin-top: 65px;
}
}

For some reason, with the larger screens the icons appear to get centered within the sidebar. But any media queries I make to adjust just start adding problems.

Can anyone point me in the right direction? Thx.

Solution

  • I solved the problem. I had tried making a media query for what I thought was the largest viewport size. As it turns out, I wrote it for the wrong width (just "barely" wrong but you know what that means -g). The media query for positioning should have been set for a min-width of 1140 px. I had set it for 1122px. So close. LOL