Support » Plugin: Widget Logic » Make widgets appear only at defined screensize?

  • Resolved kbbajer



    I am using Windget Logic on this site I am currently working on to make the secondary widgets change according to which page you’re on. But, because the contact widget is in the main area, it appears on top, as the first thing after the menu, when you visit the site on a mobile device (because the site is responsive)

    What I want to know is how to make widgets appear/disappear as the screen size is changing.

    I hope you understand, if not, please ask 🙂


Viewing 4 replies - 1 through 4 (of 4 total)
  • Would use CSS Media Queries for this, see e.g. here:

    Your responsive Oxygen theme already uses such media queries to relocate certain elements for different screen sizes, see Media Queries (mobile browsing) in your file oxygen/style.css.

    With that theme you would change the main html/css code at several places or you could (as a quick workaround which only changes style.css) add a second text-widget with the same contact-info (which on normal screens gets hidden via css display: none;) to #sidebar-secondary and add some media query css which then hides the text-widget in #sidebar-primary on smaller screens and shows the hidden contact in seconday instead.

    A plugin like Widget Logic would be the wrong approach for this case.

    Hello, and thank you for your answer.

    I see your point, but if I create a second text-widget to, lets say sidebar-primary, how do I hide only that, and not the entire sidebar-primary widget? If I add display:none to #sidebar-primary, obviously all text-widgets within that widget, will be hidden.

    Can a hide a specific text-widget by adding maybe the widget-title or something, to #sidebar-primary {dislplay:none} in the css?

    Again, thank you very much for helping out, I appreciate it.

    Don’t hide the whole sidebar, only the text-widget. It has an own id which you can see e.g. in the html source.

    This would hide your “REEL” Widget:

    #sidebar-secondary #text-4 {
        display: none;

    Aah, I see, they’ve got individual div-IDs

    That’s the information I needed, thank you very much.


Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Make widgets appear only at defined screensize?’ is closed to new replies.