http://www.kriesi.at/support/tags/responsive-web-design-css Support Forum - Tag: responsive web design css - Recent Posts en-US Thu, 23 May 2013 00:27:42 +0000 http://bbpress.org/?v=1.0.2 q http://www.kriesi.at/support/search.php http://www.kriesi.at/support/topic/place-social-media-icons-in-right-position#post-87225 Sun, 09 Dec 2012 17:29:45 +0000 Ismael 87225@http://www.kriesi.at/support/ <p>Hi HouseofStrauss,</p> <p>That's our job. :) Glad we could help. :)</p> <p>Cheers,<br /> Ismael </p> http://www.kriesi.at/support/topic/place-social-media-icons-in-right-position#post-87219 Sun, 09 Dec 2012 17:03:21 +0000 HouseofStrauss 87219@http://www.kriesi.at/support/ <p>Whoa! amazingly simple and effective! Thank-you so much ... works perfectly. </p> http://www.kriesi.at/support/topic/place-social-media-icons-in-right-position#post-87170 Sun, 09 Dec 2012 10:42:05 +0000 Ismael 87170@http://www.kriesi.at/support/ <p>Hi HouseofStrauss,</p> <p>You don't need to transfer any html, if you haven't made any customizations yet, then try to add this code on your Quick CSS or custom.css:<br /> <pre><code>@media only screen and (min-width: 960px) { #top #header .social_bookmarks { width: 280px; left: 770px !important; top: 80%; } }</code></pre> <p>Just adjust the left value and top(the greater the value the more it is pushed on the bottom) value. Hope this helps. :)</p> <p>Regards,<br /> Ismael </p> http://www.kriesi.at/support/topic/place-social-media-icons-in-right-position#post-87071 Sat, 08 Dec 2012 11:23:09 +0000 HouseofStrauss 87071@http://www.kriesi.at/support/ <p>I want to place the social icons in a similar way at the top of the sidebar. The conversation above seems to be incomplete in resolution, except for maybe to the asker outacontext.</p> <p>Can you please clarify:</p> <p>1- Which code should be transferred from the header to the sidebar.php?<br /> 2- What was the final CSS need to position these icons correctly?</p> <p>Many thanks for assistance. </p> http://www.kriesi.at/support/topic/place-social-media-icons-in-right-position#post-62099 Tue, 26 Jun 2012 01:32:06 +0000 Ismael 62099@http://www.kriesi.at/support/ <p>Hey,</p> <p>This might help you understand media queries a bit more. <a href="http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries" rel="nofollow">http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries</a></p> <p>Regards,<br /> Ismael </p> http://www.kriesi.at/support/topic/place-social-media-icons-in-right-position#post-62049 Mon, 25 Jun 2012 17:59:29 +0000 outtacontext 62049@http://www.kriesi.at/support/ <p>Okay, I think I've solved the problem. The position of the social media icons seem to be controlled by this style, not the one above:</p> <pre><code>#top #sidebar_bg .social_bookmarks {right:107px; top: -16px; }</code></pre> <p>I saw that in the css of the Sentence theme example as I watched the icons shift in that example. I made the changes to one size of the media queries area and I created a new media query for a size that seems to be missing in the media queries area:<br /> <pre><code>@media only screen and (min-width: 990px) and (max-width: 1139px)</code></pre> <p>This comes in between<br /> <pre><code>@media only screen and (min-width: 768px) and (max-width: 989px)</code></pre> <p>and<br /> <pre><code>@media only screen and (min-width: 1140px)</code></pre> <p>Is there any reason this intermediate size wasn't in the layout.css?</p> <p>And one last question, so I'll be able to understand this a bit better. Why does this style work on a monitor that allows for the largest viewport:<br /> <pre><code>#top #sidebar_bg .social_bookmarks{ margin-top: 130px; position: absolute; right: 150px; z-index: 152; }</code></pre> <p>But doesn't work in reality when the positioning is adjusted in the media query tags for the smaller viewport sizes? (even though it worked if I made adjustments to it in Firebug)? What was preventing it from working? </p> http://www.kriesi.at/support/topic/place-social-media-icons-in-right-position#post-61804 Fri, 22 Jun 2012 23:38:59 +0000 outtacontext 61804@http://www.kriesi.at/support/ <p>I've encountered a problem. I did as you suggested and added the css above to my custom.css file. However, when I did, even though it sets the max-width up to 959px, adding this css placed the social media icons in that position for a larger screen. </p> <p>So, then I decided to add css for each media query size. Like this:</p> <pre><code>@media only screen and (max-width: 959px) {} #top #sidebar_bg .social_bookmarks { margin-top: 110px; position: absolute; right: 110px; z-index: 152; } @media only screen and (max-width: 757px) {} #top #sidebar_bg .social_bookmarks { margin-top: 30px; position: absolute; right: 20px; z-index: 152; } @media only screen and (min-width: 1140px) {} #top #sidebar_bg .social_bookmarks{ margin-top: 130px; position: absolute; right: 150px; z-index: 152; }</code></pre> <p>But that didn't work. The location of the icons seems to be ruled by the last media query css for all viewport sizes. </p> <p>Can you help me out here? Thx. </p> http://www.kriesi.at/support/topic/place-social-media-icons-in-right-position#post-61773 Fri, 22 Jun 2012 20:20:23 +0000 Devin 61773@http://www.kriesi.at/support/ <p>Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:<br /> <pre><code>@media only screen and (max-width: 959px) {} #top #sidebar_bg .social_bookmarks { margin-top: 110px; position: absolute; right: 110px; z-index: 152; }</code></pre> <p>I didn't see anything referencing the social icons in your current media queries so I assumed you didn't know about them. The above, when placed in either your custom.css or even directly into the layout.css file can be adjusted to your needs.</p> <p>Regards,</p> <p>Devin </p> http://www.kriesi.at/support/topic/place-social-media-icons-in-right-position#post-61761 Fri, 22 Jun 2012 19:29:44 +0000 outtacontext 61761@http://www.kriesi.at/support/ <p>Thanks Deven but I know already know that. I already tried putting in a css for repositioning the icons into the media queries area but it didn't work. That's when I contacted you. </p> http://www.kriesi.at/support/topic/place-social-media-icons-in-right-position#post-61734 Fri, 22 Jun 2012 18:01:35 +0000 Devin 61734@http://www.kriesi.at/support/ <p>Hi outtacontext,</p> <p>Open up your layout.css and search for:<br /> <code>/* #Media Queries</code></p> <p>These are the css rules that changes the css based on the screen size so you can add an adjustment here for the social icons.</p> <p>Regards,</p> <p>Devin </p> http://www.kriesi.at/support/topic/place-social-media-icons-in-right-position#post-61698 Fri, 22 Jun 2012 14:57:54 +0000 outtacontext 61698@http://www.kriesi.at/support/ <p>I moved the social media icons from the header to the right sidebar. And I used this css to place them in the right position from the top of the page and from the right of the sidebar:</p> <pre><code>#top #sidebar_bg .social_bookmarks{ margin-top: 130px; position: absolute; right: 150px; z-index: 152; }</code></pre> <p>Of course, it looks perfect when the browser is large. But as you reduce the size of the browser window the social media icons are in the wrong place (when you resize the window to the next smallest size). </p> <p>How can I fix this for this size? (If the window size is even smaller the icons are hidden, which is fine.)</p> <p>Also, in this situation, I want to move the menu items just a bit lower. How would I do that? Thanks.</p> <p>The URL of my site is <a href="http://outtacontext.com/wp2" rel="nofollow">http://outtacontext.com/wp2</a> </p>