Hide some widgets on mobile devices

Community Forums Forums Design Tips and Tricks Hide some widgets on mobile devices

This topic is: not resolved

This topic contains 3 replies, has 3 voices, and was last updated by  cdils 1 year, 1 month ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #11989

    jodieb
    Participant
    Post count: 2

    I am building a site using the Outreach theme.  I have added a short menu to the header.  I would like to hide this widget when viewing the site on a mobile device in order to streamline things on a smaller screen.  I know this is possible but I can’t seem to make it work.

     

    http://www.outsourcingpro.biz/work-area/

    Thanks!

    Jodie B

     

    #12736

    cdils
    Participant
    Post count: 420

    I think you can use the CSS visiblity element. Something like this in your stylesheet:

    @media only screen and (max-width: 768px) { //change that pixel width to whatever screen size

    .your-widget-class { visiblity: hidden; }

    }

     


    Have you been helped in this forum? Pay it forward and answer someone else’s question. I bet you’ll know the answer to at least one question. :)

    I tweet @cdils.

    #44268

    majecdad
    Participant
    Post count: 8

    Thank you @cdils for explaining and providing an example.  I am new to responsive css, so I was struggling to figure out the exact language.

    While the above did remove the widget class, I had some serious troubles with header height and a background issue. Eventually resolved, based on the initial find of your comment.

    I find the new StudioPress forums lacking compared to the ‘old days’ but was pleasantly surprised to find your post. I just thought I’d let you know your contributions are appreciated.

    - Mitch

    #44632

    cdils
    Participant
    Post count: 420

    Thanks, Mitch!

    Here’s a great site for honing your CSS skills: css-tricks.com. Once your “regular” CSS is solid, then you can dig down into using media queries to get things re-sized properly for different devices.

    One thing that might help is to download the Genesis sample theme and study the CSS. There are some good examples in there. :)

    Cheers,
    Carrie

    p.s. Re: Forums – I’ve definitely heard others voice similar thoughts on the new forum format. This one is run by the community (in other words, anyone can answer questions – not just StudioPress staff. If you’re ever really stuck on a problem though, try the 1:1 help desk!


    Have you been helped in this forum? Pay it forward and answer someone else’s question. I bet you’ll know the answer to at least one question. :)

    I tweet @cdils.

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

You must be logged in to reply to this topic.