Adjustment to Mobile Issues
Jul. 19th, 2023 09:05 pm![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png)
Wow, It's been a while. Long story short, I've been fiddling with a skin I found (adding tumblr stuff and using code from other sources. Very few amounts of this CSS are actually mine, and I'm not taking credit.)
Here's the skin:
docs.google.com/document/d/1EUgKGeIZtHl7WqgkgklFrlD4Kla1cU7k6kMApahRbgI/edit
I've been having so much trouble trying to translate this to mobile. I'm pretty sure there's no way to specify when it's mobile in the CSS of the skin, and I no matter how hard I try, I can't understand the whole parent situation. I've been looking for ages and tutorials always use examples using public skins and I just don't know how to apply it to my custom skin. The minor attempt I made using the advanced settings on a new skin didn't work (the custom font I installed on my computer wouldn't appear because, obviously, it's custom, so I ctrl + c ctrl + v:
and changed Halloween Kliwones to Gothic Bold (installed on my phone), nothing. If anyone could give a direct play-by-play on how to change the mobile look with this frankenstein meshed skin, that would be deeply appreciated.
Here's the skin:
docs.google.com/document/d/1EUgKGeIZtHl7WqgkgklFrlD4Kla1cU7k6kMApahRbgI/edit
I've been having so much trouble trying to translate this to mobile. I'm pretty sure there's no way to specify when it's mobile in the CSS of the skin, and I no matter how hard I try, I can't understand the whole parent situation. I've been looking for ages and tutorials always use examples using public skins and I just don't know how to apply it to my custom skin. The minor attempt I made using the advanced settings on a new skin didn't work (the custom font I installed on my computer wouldn't appear because, obviously, it's custom, so I ctrl + c ctrl + v:
h1,
h2,
h3,
h4,
h5,
h6,
.heading {
font-family: Halloween Kliwones, "Bookman Old Style", "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
border-bottom: none;
font-weight: normal;
}
no subject
Date: 2023-08-03 06:18 pm (UTC)In the mobile skin, you make it "Media: only screen and (max-width: 42em)" That's all there is to it! And you don't need to put !important on the overwritten stuff in that file or anything like that, it does it all for you :) Just use the plain css you want to use on mobile that's different to the desktop version.
You can label your skins like MAIN SKIN - PARENT - DON'T USE and MOBILE - USE THIS ONE or whatever if that helps. I have a bunch of skins in a weird tree-chain and when I change skin for any reason I forget it's the mobile one I need to go back to!