I'm new to responsive web design. I am trying to get a row of social media
icons to move to the correct positions using a responsive WordPress template as
you make the screen smaller. But I'm having trouble. You can see the website in
progress at http://outtacontext.com/wp2 The row of social media icons is in the
upper area of the right sidebar.
The css in the layout.css is:
#top #sidebar_bg .social_bookmarks{
position: absolute;
right:143px;
z-index: 152;
margin-top:120px;
}
That looks good when the screen is the largest. However, as you make the window
smaller, the sidebar reduces in width and you can see that the icons don't move
accordingly. So I created a style using media queries for one of the smaller
viewport sizes to test it out:
@media only screen and (max-width: 959px) {}
#top #sidebar_bg .social_bookmarks {
margin-top: 80px;
position: absolute;
right: 100px;
z-index: 152;
}
However, when I add that style, the @media style controls the large viewport as
well and the original style is ignored. I tried making media query styles for
each max-width but it didn't make any difference. I believe the last style in
the list was always the one that was followed. (Now, at a certain point, the
social media icons become hidden as the screen goes even smaller. That's fine.
It's just the intermediary sizes that are presenting a problem.) Firebug helps
me see the icons shift as I change the parameters however, it doesn't help me
figure out why the row of icons isn't shifting properly at each size.
I have taken the media query style out so that you can see the original issue.
However, I'd like to know why my css for max-width: 959px isn't working right
as well. And I'd love to learn how to solve this problem. Thanks.
Jeff
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
