This topic is: resolved

Hide widget in responsive

  • Avatarjhoughton1
    Participant
    Post count: 69
    # 4 years, 5 months ago

    I have (mis)used the imithemes spacer widget to make a vertical line in Page Builder to separate an events stack from a posts stack. It looks great on a desktop — but trust me, it doesn’t work on an iPhone. I don’t see any Page Builder widget for a vertical line (would love one!). So… I have heard there’s a way to add CSS so that an entry in Widget Styles>Attributes>CSS Styles along the lines of “nodisplay-sm” or “hide-sm” will hide a widget when the page is viewed on a small screen. Did I dream this? I hope not, because I could really use it!

    Thanks

    AuthorAuthor
    Keymaster
    Post count: 26677
    # 4 years, 5 months ago

    Hi there

    You can add class to your widget no the style. Use class “hidden-xs” for devices below 767px width or “hidden-sm” for devices below 992px width. Use whichever you like.

    Thanks

    Avatarjhoughton1
    Participant
    Post count: 69
    # 4 years, 5 months ago

    Thanks, but doesn’t seem to be working. iPad Pro 13″ in landscape works like a desktop, vertical line right where I want it. In portrait mode, line disappears altogether. iPad Air line disappears in landscape, misbehaves totally in portrait. iPhone 6, it’s still there and misbehaving no matter which way you turn it.

    Is there supposed to be some punctuation around the hidden-sm entry in Styles? I’m new at this, so forgive the ignorance.

    Thanks.

    P.S. – The world needs a “vertical line” widget!

    Avatarjhoughton1
    Participant
    Post count: 69
    # 4 years, 5 months ago

    Sorry, I meant in “widget class” — I’ve tried it with and without quotes. It won’t hide.

    AuthorAuthor
    Keymaster
    Post count: 26677
    # 4 years, 5 months ago

    Please share your page URL where i can see this and your wp-admin credentials in a private reply for me to check it. Thanks

    Avatarjhoughton1
    Participant
    Post count: 69
    # 4 years, 5 months ago

    Sorry, I should’ve come here proactively and told you — problem solved. There needed to be some CSS inserted to enable the widget class “hidden-sm”

    A friend of mine did it for me, as I’m a CSS moron. All is well now.

    Thanks.

    Jim

    AuthorAuthor
    Keymaster
    Post count: 26677
    # 4 years, 5 months ago

    That’s great! Thanks

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

You must be logged in to reply to this topic.