WordPress.org

Ready to get started?Download WordPress

Forums

Squelch Tabs and Accordions Shortcodes
[resolved] responsive? (4 posts)

  1. Andrew_Rupert
    Member
    Posted 11 months ago #

    Hey,

    I love your plugin, do you know if you are able to make the width responsive?

    http://wordpress.org/extend/plugins/squelch-tabs-and-accordions-shortcodes/

  2. Matt Lowe
    Member
    Plugin Author

    Posted 11 months ago #

    Which widget? Making a responsive accordion is very different to making a horizontal accordion... :)

  3. Andrew_Rupert
    Member
    Posted 11 months ago #

    I have the horizontal accordion added to a responsive template. I was wondering if there was a way I could add the 100% or media min-width max-width through css.

  4. Matt Lowe
    Member
    Plugin Author

    Posted 11 months ago #

    Hi Andrew,

    I'm afraid I don't think it's currently possible to create a responsive horizontal accordion: The liteAccordion script has to be passed an explicit width for the horizontal accordion widget. It then uses this to set a width in the html on the outermost element. You could override this with an !important directive in your CSS and it might work on page load, but if anyone changes the size of the browser it will cause oddities in the horizontal accordion.

    I've not tested any of this though, and so you're more than welcome to have a go, but I honestly think you're on a hiding to nothing. Right now this plugin doesn't support responsive horizontal accordions (maybe one day in the future if I find time I'll add support to the liteAccordion script).

    If you want to give it a go then please take a look at http://squelchdesign.com/wordpress-plugin-squelch-tabs-accordions-shortcodes/#styling (read the "General" tab first to get an idea of how styling works in general in Squelch TAAS and then move onto the "Horizontal Accordions" tab for the specifics).

    I expect you'll end up with something like this:

    @media screen and (max-width: 600px) {
        .squelch-taas-haccordion.yournewthemename {
            width: 580px !important;
        }
    }
    @media screen and (max-width: 400px) {
        .squelch-taas-haccordion.yournewthemename {
            width: 380px !important;
        }
    }

    If you have any luck please let me know!

Reply

You must log in to post.

About this Plugin

About this Topic

Tags