I made some posts before but it was suggested that I start a new one.
My site: http://asofsky.com renders nicely in iPhone portrait mode with the mobile interface. When I switch to landscape mode it does not go into mobile mode but it renders acceptably in regular mode (I prefer it goes into mobile mode). On the iPad it does not go into mobile mode and the header content is moved on top of the logo. You had helped me bypass the header content which then made it look ok but the header content was lost. I took a screen shot but it doesn’t look like I can upload here. I am trying to figure out a way to have the iPad render the header correctly. The menu looks correct … It is strictly the content in the header.
Is there a way to remove only an individual widget in the header on an iPad? If I remove one of the three widgets the header would look acceptable. I really don’t want to remove widget on the full site on a pc … just for iPad
Thanks in advance for your help
DA
Hi DA
If you have a link please send it through and I’ll take a look. Let me know, do you want to hide a particular widget on tablet OR do you want to split your widgets onto a new line for tablet.
If you want to split your header widgets onto a new for tablet displays you can try the following under Appearance > Custom CSS:
/* Vantage increase support text breakpoint */ @media screen and (max-width: 1024px) { body.responsive header#masthead hgroup .support-text, body.responsive header#masthead hgroup #header-sidebar { position: static; display: block; margin-top: 30px; max-width: 100%; } }Andrew,
oops … I didn’t give you the full URL … It is: http://asofsky.com/garon2
I will try your solution. I think I’ll try to split to a new line and see how that goes
Thanks
DA
For sure.
Andrew,
The solution outlined above did not work. It seems that nothing changed.
Any help is greatly appreciated!
Thanks,
DA
Please ensure the Custom CSS is added so I can see it in action. Thanks.
Andrew,
This is the three mobile modifications exactly as they are in my custom CSS editor
/* Content just on mobile*/ .mobile-info { display: none; } @media screen and (max-width: 1030px) { .mobile-info { display: block; } } @media screen and (max-width: 1030px) { margin-left: 3px; /* Vantage increase support text breakpoint */ @media screen and (max-width: 1030px) { body.responsive header#masthead hgroup .support-text, body.responsive header#masthead hgroup #header-sidebar { position: static; display: block; margin-top: 30px; max-width: 100%; } }Thanks,
DA
Give this a try:
@media screen and (max-width: 960px) { body.responsive header#masthead hgroup #header-sidebar { position: static; display: block; margin-top: 30px; max-width: 100%; } header#masthead hgroup .logo { float: none !important; text-align: center; width: 100% !important; } header#masthead hgroup h1 { text-align: center !important; } }Hi Andrew,
I have the same issue. Tried the solution via Simple Custom CSS. No change. I have the logo and banner overlapping in iPad. Please help.
My site is new.atcas.org.sg