Responsive tab width?

  • hommealone

    (@hommealone)


    10 years, 3 months ago

    I’ve made a slider using the tabs as actual tabs, not thumbnails. When the screen size shrinks below the (boxed) size of the slider, the tabs stay full sized, and scroll (as you would expect with thumbnails), rather than adapting in width, as you might prefer with tabs. I’d like each tab to shrink in width proportionally to the entire slider instead.

    There are three tabs. I’ve tried to set a max. width on the row of tabs, and a max width of 33.3% for each tab, but I can’t make the tab width responsive. Is this possible? Can you suggest anything I could add to my stylesheet that would make this happen?

    The site is under development, but you can see the slider here:
    http://astorservices[dot]dreamhosters[dot]com

    https://ww.wp.xz.cn/plugins/master-slider/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Averta Support

    (@averta-support)

    10 years, 3 months ago

    Hi,
    You can change the size of tabs in different screen size by the code like below:

    @media screen and ( max-width: 782px ) {
  .ms-thumb-frame{
    height: 36px !important;
    width: 56px !important;
}
}

    Regards
    Averta Support

    Thread Starter hommealone

    (@hommealone)

    10 years, 3 months ago

    Thanks!

    I might need to go that route, but I was hoping for something in which the tab width adjusted to whatever width the slider was shown at, rather than in steps as would be the result with your solution.

    I am toying with a javascript solution. I’d like to enqueue my script so that it doesn’t load until after the Master Slider script, but that requires that I provide the “handle” of the Master Slider script, and it doesn’t seem to have one, as far as I can tell? Am I wrong about that, and if so, what is the script’s handle?

    Thread Starter hommealone

    (@hommealone)

    10 years, 3 months ago

    I have a nice simple javascript solution to make sure that the tabs are always proportional. But I need it to load after the Master Slider script, which doesn’t seem to have been enqueued with a ‘handle’. Any suggestions?

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Responsive tab width?’ is closed to new replies.