Media Query Not Working With Larger Viewport Sizes - css

Question

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.

Answer 1

First of all, I'm Argentinean, so forgive me for my English!
Here's my help...
The HTML markup is:
<div id="sidebar_bg">
<ul class="social_bookmarks">
<li class='twitter'>
<a href='http://twitter.com/outtacontext'>Follow us on Twitter</a>
</li>
<li class='facebook'>
<a href='http://facebook.com/chamomileteaparty'>Join our Facebook Group</a>
</li>
<li class='gplus'>
<a href='https://plus.google.com/106461359737856957875/posts'>Join me on Google Plus</a>
</li>
<li class='linkedin'>
<a href='http://linkedin.com/jeffgates'>Add me on Linkedin</a>
</li>
<li class="rss">
RSS
</li>
<li class="flickr">
Flickr
</li>
</ul>
</div>
The CSS styles:
#top #sidebar_bg {
text-align: center; /* This will center EXACTLY on the middle the icons (acording to the #sidebar_bg width on every screen resolution */
}
#top #sidebar_bg .social_bookmarks {
display: inline-block;
z-index: 152;
margin-top: 102px;
}
#media only screen and (max-width: 989px) and (min-width: 768px){
#top #sidebar_bg .social_bookmarks {
margin-top: 65px;
}
}
ALTERNATIVE CSS - if you want to put it right or left, and use media queries to determine the separation width from one of the sides, you can use this:
#top #sidebar_bg {
text-align: *****; /* right or left */
}
#top #sidebar_bg .social_bookmarks {
margin-*****: 40px; /* right or left */
display: inline-block;
z-index: 152;
margin-top: 102px;
}
#media only screen and (max-width: 989px) and (min-width: 768px){
#top #sidebar_bg .social_bookmarks {
margin-*****: 25px; /* right or left */
margin-top: 65px;
}
}

Answer 2

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