Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #13549

    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:

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

    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).

    How can I fix this for this size? (If the window size is even smaller the icons are hidden, which is fine.)

    Also, in this situation, I want to move the menu items just a bit lower. How would I do that? Thanks.

    The URL of my site is http://outtacontext.com/wp2

    #79650

    Hi outtacontext,

    Open up your layout.css and search for:

    /* #Media Queries

    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.

    Regards,

    Devin

    #79651

    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.

    #79652

    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:

    @media only screen and (max-width: 959px) {}
    #top #sidebar_bg .social_bookmarks {
    margin-top: 110px;
    position: absolute;
    right: 110px;
    z-index: 152;
    }

    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.

    Regards,

    Devin

    #79653

    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.

    So, then I decided to add css for each media query size. Like this:

    @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;
    }

    But that didn’t work. The location of the icons seems to be ruled by the last media query css for all viewport sizes.

    Can you help me out here? Thx.

    #79654

    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:

    #top #sidebar_bg .social_bookmarks {right:107px; top: -16px; }

    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:

    @media only screen and (min-width: 990px) and (max-width: 1139px)

    This comes in between

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

    and

    @media only screen and (min-width: 1140px)

    Is there any reason this intermediate size wasn’t in the layout.css?

    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:

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

    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?

    #79655

    Hey,

    This might help you understand media queries a bit more. http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

    Regards,

    Ismael

    #79656

    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.

    Can you please clarify:

    1- Which code should be transferred from the header to the sidebar.php?

    2- What was the final CSS need to position these icons correctly?

    Many thanks for assistance.

    #79657

    Hi HouseofStrauss,

    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:

    @media only screen and (min-width: 960px) {
    #top #header .social_bookmarks {
    width: 280px;
    left: 770px !important;
    top: 80%;
    }
    }

    Just adjust the left value and top(the greater the value the more it is pushed on the bottom) value. Hope this helps. :)

    Regards,

    Ismael

    #79658

    Whoa! amazingly simple and effective! Thank-you so much … works perfectly.

    #79659

    Hi HouseofStrauss,

    That’s our job. :) Glad we could help. :)

    Cheers,

    Ismael

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Place Social Media Icons in Right Position’ is closed to new replies.