[Resolved] problems with display on small screens

[Michael Loguidice]

Hi everyone,

I’ve recently noticed that the header text and graphic – my logo is in the header on the right side – doesn’t display properly on mobile devices or when I shrink the browser on a pc. I’m hoping there’s an easy plug-in or adjustment that can scale down the site to fit comfortably on a small screen.

here’s my site: http://truehealthtruelife.com/

I apologize if this was already covered, I’ve looked around but I couldn’t really recognize the solutions. I kind of need to be told directly with these things!!

Thanks so much!
Michael

[Tom]

Hi there,

Background images can be a pain when changing browser size.

Give this CSS a try:

@media (max-width: 768px) {
    .site-header {
        background-position: top center;
        padding-top: 240px;
        background-size: 200px;
    }
}

[Michael Loguidice]

Hi Tom,

Thanks, but nothing changed. I assumed this code goes into the custom css, that’s where I put it.

Anyway, I don’t really need the header to even size down. The rest of the site does that automatically and it looks good enough. Even if I could just have the header stay in place for a smaller screen, instead of scale down to fit the screen, that would be fine too. Any thoughts?
Much appreciated,
Michael

[Tom]

The code I gave you looks like it’s working – try clearing your browser cache, then viewing the site on a small screen.

It would be very difficult to keep the logo on the right, and still show the text on the left without the text being super cramped.

The code I gave you puts the logo above the text on mobile, so both of them have room to breathe.

Let me know 🙂

[Michael Loguidice]

Hi Tom,

You’re right, my bad on this one. It’s working and looks great!! Refreshing is the cache is usually what I forget to do!

Thanks again for all your help!

Regards,
Michael

[Tom]

You’re welcome! 🙂

[Author]

Posts