This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Remove header widgets for mobile devices only…

Resolved 9 replies premiumthemetheme-vantage
dasofsky
11 years ago · Last reply by Andrew Misplon 11 years ago

I have the theme set to responsive. When the site is opened up on an iPad or iPhone the top header widgets are on top of the company logo. Is there a way to disable the header widgets just for those platforms?

My site is: http://asofsky.com/garon2/

Thanks in advance for your help

DA

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

9
  1. Andrew Misplon Staff 11 years, 8 months ago

    Hi DA

    Try this under Appearance > Custom CSS:

    /* Vantage hide header sidebar on tablet */
@media screen and (max-width: 960px) {
body.responsive header#masthead hgroup #header-sidebar {
display: none;
}
  2. dasofsky 11 years, 8 months ago

    Andrew,

    Thanks so much! It worked great on the iPhone, iPad Portrait view. When looking at the iPad in landscape mode the header text is still showing on top of the logo. Is there anyway of clearing that up?

    Thanks,

    DA

  3. Andrew Misplon Staff 11 years, 8 months ago

    Super, glad that helped. Landscape is at 1024px so just increase my media query from 960px to 1024px and you should be good to go.

  4. dasofsky 11 years, 8 months ago

    Everything worked as planned. Thanks so much.

    Last question: If you look at my site (asofsky.com/garon2) on an iPhone the text goes right to the end on both sides. Is there way I can add some padding or margins on the 1024px (and below) layout?

  5. Andrew Misplon Staff 11 years, 8 months ago

    Super.

    In your custom CSS you’re saying:

    #main {
background: #FCFCFC;
padding: 0;
}

    Try changing that to:

    #main {
background: #FCFCFC;
padding: 0 35px;
}
  6. dasofsky 11 years, 8 months ago

    As usual thanks for your help … It was exactly what it needs. So the main site padding has a second parameter for the responsive padding?

  7. Andrew Misplon Staff 11 years, 8 months ago

    For sure.

    By default the Vantage #main container has 35px all round. In your Custom CSS you removed this. Perhaps to get your initial Page Builder row on the home page flush with the slider. If that’s the only reason you set padding to 0 then you could rather say:

    .home #main {
padding-top: 0 !important;
}

    What we have now is the same as saying:

    padding-top: 0;
    padding-right: 35px;
    padding-bottom: 0;
    padding-left: 35px;

    We aren’t using media queries here though. We’re just working with the padding on #main for all resolutions.

  8. dasofsky 11 years, 8 months ago

    You DA Man,

    When I bypass the header on the mobile platforms it removes some content in the header I would like to preserve. Is there a way to add some text content only to the mobile versions? I would like to list the telephone number and a few addition words that don’t display on mobile.

    Thanks,

    DA

    pss – I am trying to come up to speed with css as fast as I can so I don’t have to post many other questions!

  9. Andrew Misplon Staff 11 years, 8 months ago

    No problem, glad to help.

    We can in a rough way. Using the Text widget or Visual Editor widget (http://wordpress.org/plugins/black-studio-tinymce-widget/) in HTML view you could add text like this:

    <div class="mobile-info">Your text goes here</div>

    Then we could use media queries to hide that class in desktop but display it at a certain breakpoint.

    .mobile-info { display: none; }
@media screen and (max-width: 960px) {
.mobile-info { display: block; }
}

    I also run through some CSS here for adding icons making the header a bit smarter: https://siteorigin.com/thread/problem-with-header/.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread