Hey. On this website: indiez.ch , if you open the menu on a mobile screen, there’s an ugly white bar. Where the hell is this coming from? I can’t really make sense of where this css is being applied.
Theme used is lightly modified Alto theme. And the whole website is a bit of a mess I know, but this issue I am stuck on
Try this:
<style>
@media (max-width: 767px) {
.is-head-open #gh-head .gh-head-actions {
background-color: unset;
}
}
</style>
I think you’re going to need that in the code injection /footer/ or else tack an !important after unset to prevent later code from overwriting it.
The inject works, thanks!
Actually, I’ve encountered this a few times, that I’m not sure from where in the theme file some styling actually comes from, how does that overwriting work? Is there something on the docs of code that is processed after the theme files?
There’s an entire set of rules for what css gets applied when there are conflicting styles. If the selectors are the same (true here), the last one wins (which is why I suggested putting it in the footer code injection).
Important is a general all-purpose hammer for when you really want this rule applied, regardless, but should be used sparsely, because it makes it hard to override your override.
yeah, but where are those conflicting styles coming from? are they some default or something?
Yep. I’m guessing the Alto theme was built for white, and that white chunk is incorrectly coded so that it doesn’t turn dark when you switch to darkmode.
strange. where can I modify those deaults? Now I’m having an issue on indiez.ch that the .post-media-tag class just refuses to appear in css, even though it used to, I can’t think of anything I did that changed that. Even code injection with !important doesn’t result in the class actually being applied. The hell?
You could download the Alto theme and look for where the definition is. Look for an assets/css folder, probably. And you’ll need to run gulp after making changes, I think to get the CSS compiled. (Haven’t done much with Alto, but most of the official Ghost themes are set up that way.) Lots of good tutorials here:
if you’ll link the specific page with the problem, I can look.
goddamnit you’re right I just forgot to run gulp after I did some changes that fixed something. I should really go to sleep
laughs Oh, yeah, I’ve never ever ever made changes to a theme and forgotten to run gulp and then spent half an hour trying to debug my css selectors. Well, I haven’t done it yet today, anyway! :)