WordPress.org

Ready to get started?Download WordPress

Forums

Widget Logic
[resolved] Make widgets appear only at defined screensize? (5 posts)

  1. kbbajer
    Member
    Posted 10 months ago #

    Hey

    I am using Windget Logic on this site I am currently working on http://visualartwork.dk/ 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 :)

    cheers!
    Krisitan

    http://wordpress.org/plugins/widget-logic/

  2. Ov3rfly
    Member
    Posted 10 months ago #

    Would use CSS Media Queries for this, see e.g. here:
    http://cssmediaqueries.com/what-are-css-media-queries.html

    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.

  3. kbbajer
    Member
    Posted 10 months ago #

    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.
    Kristian

  4. Ov3rfly
    Member
    Posted 10 months ago #

    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;
    }
  5. kbbajer
    Member
    Posted 10 months ago #

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

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

    Cheers.

Reply

You must log in to post.

About this Plugin

About this Topic