Problem with Mobility on mobile with a header

[carisma_sensei]

Now that I got my header up as you can see on my journal, it looks great on PC which is where I mostly use Dreamwidth. But on mobile it's obviously not responsive (the css is, the header isn't).

Is there anything I could do to fix this, or should I rather learn to live with it? hahaha. If this were transmogrified, I know the content and the header would have the same measures when zooming in and out. But for this, since it's customized for mobile viewability, I don't know what I could do. So any input would be appreciated.

Thanks in advance!

Comments

[momijizukamori]

#header {
background-size: cover;
width: auto;
background-position: right; }

(you may have to add !important to width and position to get those to register). Alternatively, background-size: contain will keep the entire header visible, but you will probably have to do some tricky things with height to not have huge empty borders on mobile - you can see an example with the sidebar image code on https://pinned-together.net/

[carisma_sensei]

Thanks! I think it looks great now. I could have never figured that out myself hahaha

[momijizukamori]

Glad to help! background-size is a newer attribute and I think not really well-known, but it's great for stuff like this.