[Resolved] Fluid blog page header on mobile

[Ben]

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!

[Tom]

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 🙂

[Ben]

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

[Ben]

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!

[Tom]

Interesting, it looks good to me.

Can you show me a screenshot of what you’re seeing?

[Ben]

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!

[Tom]

No problem 🙂

[Author]

Posts