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
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; }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
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.
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?
Super.
In your custom CSS you’re saying:
#main {background: #FCFCFC;padding: 0;}Try changing that to:
#main {background: #FCFCFC;padding: 0 35px;}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?
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.
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!
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:
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/.