On Sat, Jun 23, 2012 at 9:02 AM, Gates, Jeff <gat...@si.edu> wrote: > 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; > } > > Jeff >
I use the following media queries in projects: media="screen" (base style) media="only screen and (min-width: 480px) media="only screen and (min-width: 600px) media="only screen and (min-width: 768px) media="only screen and (min-width: 992px) and I build/style the layout starting with the mobile width(s) first. Also, there is a lot of use of absolute positioning. This seems like it would be much more tricky to use in a responsive layout. For the social icons, i suggest relative positioning so it moves with the layout and adjust margin/padding as needed... maybe let the stack at narrower widths if desired. I also would suggest display: none; on narrow widths as opposed to the large negative margin to hide the icons. HTH -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com ______________________________________________________________________ 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/
