[Resolved] problems with display on small screens

Home Forums Support problems with display on small screens

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #97101
    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

    #97136
    Tom
    Lead Developer
    Lead Developer

    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;
        }
    }
    #97158
    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

    #97280
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #97438
    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

    #97568
    Tom
    Lead Developer
    Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.