Edited CSS to adapt to cell phone screens, based on screen orientation

This commit is contained in:
TechEmporium 2019-01-18 17:04:59 -05:00
parent c0273eeb98
commit 9a91052f45

View File

@ -140,11 +140,20 @@ padding-left: 0;
/* Page */ /* Page */
@media only screen and (orientation: landscape){
#page { #page {
width: 980px; width: 980px;
margin: 0 auto; margin: 0 auto;
padding: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
} }
}
@media only screen and (orientation: portrait) and (overflow-inline){
#page {
margin: 0 auto;
padding: 0px 0px 0px 0px;
}
}
#page-bgtop { #page-bgtop {
padding: 20px 0px; padding: 20px 0px;
@ -160,9 +169,8 @@ padding: 0px 0px 0px 0px;
} }
} }
@media only screen and (orientation: portrait){ @media only screen and (orientation: portrait) and (overflow-inline){
#content { #content {
width: 650px;
padding: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
} }
} }
@ -233,9 +241,8 @@ color: #00FF00;
} }
} }
@media only screen and (orientation: portrait){ @media only screen and (orientation: portrait) and (overflow-inline){
#sidebar { #sidebar {
width: 310px;
margin: 0px; margin: 0px;
padding: 0px 20px 0px 0px; padding: 0px 20px 0px 0px;
color: #00FF00; color: #00FF00;