koryou: (0)
Meike ([personal profile] koryou) wrote in [community profile] style_system 2017-04-16 10:46 am (UTC)

No need to change anything on your phone, it's just stuff that goes into the Custom CSS in your style settings.

Or you could do that, didn't think of that yesterday. There are only two themes for Mobility, so that's not much of a choice. Tried to find a list of theme IDs, but no luck. Looks like you actually have to apply the theme to get that, so it's a good thing you already have that one.

Okay, I fiddled around with the CSS a bit and tested it on my phone, so this should work.
Your style already defaults to a one column layout on smaller screens (if you didn't deactivate that in your account settings), so that's easy. Now go to your customization page and add this to the custom CSS:

@media (max-width: 750px) {
#header {
margin: 0;
}

.module-navlinks {
text-align: center;
margin-bottom: 0;
padding-right: 0;
}

#content {
margin: -50px 0 0;
}

#primary > .inner:first-child {
padding: 0 5px;
}

.navigation.topnav.empty {
margin-bottom: 0;
}

.entry {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}

.has-userpic .entry .header, .has-userpic .comment .header {
margin-left: 65px;
}

.has-userpic .entry .userpic {
margin: -4.5em 3px 3px;
}

.userpic img {
height: auto;
max-width: 60px;
}
}

@-ms-viewport {
width: device-width;
}


It changes nothing about the look of your layout when you look at it on a bigger screen, but you see the difference on your phone. If this is alright for you, then that's it, no need to do anything more.

It only takes effect on your own style of course.

Post a comment in response:

This account has disabled anonymous posting.
If you don't have an account you can create one now.
HTML doesn't work in the subject.
More info about formatting