Archived topic
Fluid blog page header on mobile
6 replies · Started by Ben on March 3, 2016
I'm a huge fan of the fluid blog page header, but I can't for the life of me get it to display properly on mobile. I'm using a shot of the blogger + an overlaid png image (via the add content option), which looks fabulous until I get to mobile, where everything is thrown out of whack: http://larryalextaunton.com/blog/
I've been toying with .inside-content-header css edits (background-size, width, padding, etc) for @media (max-width: 768px), but all to no avail. Any thoughts on what could do the trick?
Many thanks!
First, I would remove this custom CSS:
@media (max-width: 768px) {
.page-header-content {
background-position: top;
background-size: 100% auto;
}
}Then add this:
@media (max-width: 768px) {
.inside-content-header img {
padding-left: 0 !important;
}
}That should help :)
Excellent - that did it! Many thanks. Also added this padding adjustment to the mobile style:
@media (max-width: 768px) {
.inside-content-header {
padding-top: 55px;
padding-bottom: 35px;
}
}Actually, Tom - I thought this was resolved, but it turns out that, while the png overlay is displayig properly now, the fluid header background isn't showing at all; instead, it's just a light gray filler. Any thoughts on how to resolve the issue?
Thanks again!
Interesting, it looks good to me.
Can you show me a screenshot of what you're seeing?
You're right, Tom. Must be a cache issue or something of that sort on my end, because I can't replicate the issue on any other mobile device. Many thanks!
No problem :)