Home Forums Flowfolio WordPress Theme Google+ share button miss align

This topic contains 12 replies, has 2 voices, and was last updated by  EthraZa 1 year, 10 months ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #7347

    EthraZa
    Participant

    I´m having a problem with this social media button on the Blog. (http://www.spotapp.mobi – It´s the home page now)
    Accessing it from mobile devices, tablets and phones, shows it ok. But accessing it from desktop Chrome, shows it 8px higher.

    If I set a style in the “Custom CSS” like
    li.post_googleplus, li.google iframe {margin-top:0px !important;}
    It will display correct on desktop but then it will display 8px lower in mobile devices.

    How can I correct this on the desktop without mess up with mobile site?

    Thank you.

    #7357

    BWSM
    Keymaster

    Please try to update your code to:

    @media (min-width: 769px) {
    li.post_googleplus, li.google iframe {margin-top:0px !important;}
    }
    #7358

    EthraZa
    Participant

    Hummm… now it works on Desktop and Phone but get lower on Tablets!

    I´m using Chrome developer tools to see how it shows on different devices.

    #7359

    EthraZa
    Participant

    I think I got a better result with (min-width: 1025px), but tablets with higher resolutions like Google Nexus 10 still show it incorretly.
    Maybe there is another parameter to base the CSS decision then the width?

    #7361

    BWSM
    Keymaster

    We do not have the Google Nexus 10 to test it, but I test it on chrome develop tool, it is fine. https://www.dropbox.com/s/fkc5drp54qefxfs/QQ20150525-1.jpg?dl=0

    #7368

    EthraZa
    Participant

    Hi. I too use Chrome develop tool.
    In you picture, Nexus 10 is not selected in the Device menu, so the resolution is 800×1280, there is will show fine cuz 800<1025. If you choose Nexus 10 and click refresh in the browser, it will reload the page in 1280×800. Since 1280>1025, you will see the problem happening.
    https://www.dropbox.com/s/su325xs64fiy933/Nex10.png?dl=0

    #7369

    BWSM
    Keymaster

    – download the file, unzip it
    – login FTP, go to: themes/flowfolio/js/
    – upload / replace: main.js

    update your css to:

    @media (min-width: 1025px)
    body:not(.ux-android) li.post_googleplus, li.google iframe {
      margin-top: 0px !important;
    }
    }
    #7376

    EthraZa
    Participant

    I replaced the file and changed the custom CSS to
    @media (min-width: 1025px) {body:not(.ux-android) li.post_googleplus, li.google iframe {margin-top: 0px !important;}} (Is it right? I’m not exactly good at CSS),
    but no dice… Google Nexus 10 still shows the button 8px lower.
    I let the file and code in place if you want to take a look.

    Thank you.

    #7377

    BWSM
    Keymaster

    Sorry, my mistake, update css to:

    @media (min-width: 1025px)
    body:not(.ux-android) li.post_googleplus,body:not(.ux-android) li.google iframe {
      margin-top: 0px !important;
    }
    }

    If it doesn’t work, please leave your wp-admin(url/user/pass) as private reply, I’ll log in to check it.

    #7383

    EthraZa
    Participant

    Now it worked right everywhere but Desktop. I put yestardays CSS back because it´s better to work right on Desktops than high resolution tablets.

    #7384

    EthraZa
    Participant
    This reply has been marked as private.
    #7391

    BWSM
    Keymaster

    I tested the code on your site with desktop and Google Nexus 10(in Chrome developer tool), both fine. Please try to clean the browser cache.

    If it doesn’t work on your desktop still, please let me know your os and browser

    #7398

    EthraZa
    Participant

    Hi,
    Now it´s working fine everywhere… I don’t know what I did wrong… sorry.

    Thank you so much for your support, you has been really awesome.

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

You must be logged in to reply to this topic.