Archived topic

problems with display on small screens

5 replies · Started by Michael Loguidice on April 9, 2015

Viewing posts 1–6 of 6

April 9, 2015 at 4:52 pm #97101

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

April 9, 2015 at 11:49 pm #97136

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

April 10, 2015 at 12:34 am #97158

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

April 10, 2015 at 9:33 am #97280

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 :)

April 10, 2015 at 3:21 pm #97438

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

April 11, 2015 at 12:00 am #97568

You're welcome! :)

This archived topic is closed to new replies.

Start building better websites today.