Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #21851

    I’ve changed the position of the social media icons in my Sentence theme so that they are on the sidebar over the menus. Example: http://outtacontext.com/wp2

    The css I applied to do this for a computer monitor is:

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

    However, as the viewport gets smaller I want to reposition the icons so that they continue to be in the proper position. So, as I reduced the viewport size I added this css in the custom.css page:

    @media only screen and (max-width: 989px) and (min-width: 768px) {
    #top #sidebar_bg .social_bookmarks {
    margin-top: 102px;
    position: absolute;
    right: 78px;
    z-index: 152;
    }
    }

    But the media query style doesn’t seem to be working and I can’t figure out why. The original style is still in place. Can you figure out what’s going wrong? Thx.

    #113331

    Hi outtacontext,

    It’s being overwritten by:

    @media only screen and (max-width: 1120px) and (min-width: 768px)
    #top #sidebar_bg .social_bookmarks {
    right: -250px;
    top: -20px;
    }

    located in your custom.css

    Regards,

    Ismael

    #113332

    Okay, I got rid of that media query and now only have this one:

    @media only screen and (max-width: 975px) and (min-width: 750px) {
    #top #sidebar_bg .social_bookmark {right:29px; top: -47px;}
    }

    But it’s not working.

    #113333

    I think you need something more like:

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

    #113334

    Well, that works better for the the smaller viewports. However, for the large, monitor size the social media icons are now centered within the sidebar. I want them to be flush left with the menu items just below.

    BTW, I tried using a media query to reposition the icons where they were at a viewport size of 1122px or greater but it didn’t work:

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

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

    #113335

    Unfortunately, pixel perfect adjustment isn’t something we can help with. If you need a very specific layout your best route is to hire a freelance developer who can make the adjustments all at once. The order of your CSS, media queries and only adding specific declarations are all contributing factors so going back and forth on a bit here and a bit there isn’t going to solve the overall goal and issue.

    The above css is a good baseline but you also need to take into account the themes media queries and their effects on the items as well.

    #113336

    I fixed it. I looked at the theme’s largest viewport media query in the layout.css file and then used that pixel width to create mine. The size I used (which didn’t work) was 1122px. As it turns out, the fix was simple. The query should have been written for a little larger size: 1140px.

    #113337

    Hi outtacontext,

    Glad that you’ve fixed it. :)

    Cheers,

    Ismael

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

The topic ‘Custom CSS Social Media Positioning Not Working’ is closed to new replies.