- This topic has 5 replies, 2 voices, and was last updated 7 years, 1 month ago by
Tom.
-
AuthorPosts
-
April 9, 2015 at 4:52 pm #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!
MichaelApril 9, 2015 at 11:49 pm #97136Tom
Lead DeveloperLead DeveloperHi 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; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentApril 10, 2015 at 12:34 am #97158Michael 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,
MichaelApril 10, 2015 at 9:33 am #97280Tom
Lead DeveloperLead DeveloperThe 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 ๐
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentApril 10, 2015 at 3:21 pm #97438Michael 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,
MichaelApril 11, 2015 at 12:00 am #97568Tom
Lead DeveloperLead DeveloperYou’re welcome! ๐
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.