Mobile displays both vertical and horizontal

  • Resolved Jaya

    (@jsiwp)


    7 years, 11 months ago

    I’ve had this plug in for awhile, but at some point after either a WP or plugin update, I have this problem.

    No matter what maximum/minimum I set to trigger the mobile vertical and horizontal floating bars, my iPhone 5s displays BOTH. I’ve tried setting the difference to be everything from 300, 600, 1000, and 1200 pixels.

    What I want is for desktop viewers (widescreen) to get the vertical floater, and for mobile (narrow screen) viewers to get the horizontal.

    It’s driving my crazy. Can you tell me what to do? Thanks!

    https://wordpress.org/plugins/add-to-any/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author micropat

    (@micropat)

    7 years, 11 months ago

    What I want is for desktop viewers (widescreen) to get the vertical floater, and for mobile (narrow screen) viewers to get the horizontal.

    That’s exactly what AddToAny’s Responsiveness values default to.

    Vertical:
    ✓ Only display when screen is larger than 980 pixels wide

    Horizontal:
    ✓ Only display when screen is smaller than 981 pixels wide

    Make sure to clear your site’s cache(s) after making changes. Feel free to point to your site if you’re still stuck.

    Thread Starter Jaya

    (@jsiwp)

    7 years, 11 months ago

    Thanks for responding so quick. So I went ahead and cleared the floating settings, so they are back on the default. Cleared the cache, and have both vertical and horizontal bars floating on my iPhone 5s screen (and desktop too!)

    I could turn off bottom floaters entirely, since vertical float on desktop is the most important one. However, I think that the horizontal bars are much better for mobile!

    Here’s an example of a freshly cache-cleared page: http://jayasavannah.com/vip/

    Plugin Author micropat

    (@micropat)

    7 years, 11 months ago

    Is Responsiveness enabled for each floating bar? Those two checkboxes should be checkmarked.

    If they’re actually checkmarked, then something on your site is preventing the relevant CSS from outputting. When you “View Source” in your browser you should see the relevant CSS on your page:

    @media screen and (max-width:980px){
.a2a_floating_style.a2a_vertical_style{display:none;}
}
@media screen and (min-width:981px){
.a2a_floating_style.a2a_default_style{display:none;}
}

    Thread Starter Jaya

    (@jsiwp)

    7 years, 11 months ago

    Solved. I isolated the problem to some new landing pages I created, using an original template provided by my theme. I was able to paste the code you gave me above into the custom css for those pages and it’s displaying correctly!

    Curious. Is it possible to modify the code on so that it would not display at all on some of those pages?

    Or better yet, that it would share a specific link? Some of these pages are opt-in gift content and it would be nice to have it share the opt-in page instead of the gift.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Mobile displays both vertical and horizontal’ is closed to new replies.