CSS elements on iPhone (etc)
SmugSam
Registered Users Posts: 94 Big grins
Hi there,
My site does not display very nicely on smaller screens. I am trying to rectify this. I have tried playing around with some CSS adjustments to hide the left sidebar for smaller screens. Whilst I can successfully turn some elements on/off if a smaller screensize is detected, other elements (sidebar, header, etc) seem to ignore any changes.
As an example, this works (it hides the title/logo on a small screen, but stays visible on a larger screen):
But this does not:
The base theme is Arrow. If anyone has any idea(s) what may be going on I would appreciate hearing them! I am a CSS newbie (in case that wasn't obvious...). One random thought I had - whether some of the theme elements have different names when accessed from mobile browsers?
Appreciate any ideas, good or bad!
Sam
My site does not display very nicely on smaller screens. I am trying to rectify this. I have tried playing around with some CSS adjustments to hide the left sidebar for smaller screens. Whilst I can successfully turn some elements on/off if a smaller screensize is detected, other elements (sidebar, header, etc) seem to ignore any changes.
As an example, this works (it hides the title/logo on a small screen, but stays visible on a larger screen):
@media only screen and (max-width: 640px) {
.sm-page-widget-logo { display: none; }
}
But this does not:
@media only screen and (max-width: 640px) {
.sm-page-layout-region-left { display: none; }
}
The base theme is Arrow. If anyone has any idea(s) what may be going on I would appreciate hearing them! I am a CSS newbie (in case that wasn't obvious...). One random thought I had - whether some of the theme elements have different names when accessed from mobile browsers?
Appreciate any ideas, good or bad!
Sam
0
Comments
Sam
______________________________
SmugMug site - samuelmcdowell.com