[resolved] Responsive Positioning Change (2 posts)

  1. alexdocviewsolutions
    Posted 1 year ago #

    Hey ZoranC,

    I love this plug-in. You've made my life so easy, thank you.

    One question I have, how can I tweak the CSS so on mobile (say about 500px or less) the window is 10% from top of screen instead of the 55% I have it at currently?

    Thank you for any advice


  2. zoranc
    Plugin Author

    Posted 1 year ago #

    With tab slide pro you could simply have two separate, almost duplicate instances, one dedicated for mobile and another dedicated for desktops...With the free version, it is slightly trickier but still doable...first you'll need the upcoming version of tab slide (v2.0.1) which is scheduled for release tomorrow (you can just wait to do an autoupdate so you don't loose your settings by uninstalling)

    Go to the tab slide settings screen and make the adjustments you want for the mobile version, then switch to CSS only mode and copy paste the generated css result from the textarea into a new file, lets call it mobile_tab_slide.css and lets put it in wp-content/uploads/mobile_tab_slide.css

    You can switch back to regular mode and readjust the settings you want on the desktops at this point and hit save.

    Then at the end of your functions.php add the following:

    add_filter( 'tab_slide_css_url', 'mobile_css_url_handler');
    function mobile_css_url_handler($url) {
         if (wp_is_mobile()) {
             // REPLACE yoursite.com with actual site below
             $url = 'http://yoursite.com/wp-content/uploads/mobile_tab_slide.css';
         return $url;

    make sure you replace the http://yoursite.com/ url to the actual url and you should be good to go

    the mobile_tab_slide.css stylesheet should load when the mobile devices are viewing the page, otherwise the usual tab slide css will be used

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic