Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Fluid blog page header on mobile

Home Forums Support Fluid blog page header on mobile

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

    #176958
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #177009
    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;
    	}
    }
    #177023
    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!

    #177042
    Tom
    Lead Developer
    Lead Developer

    Interesting, it looks good to me.

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

    #177046
    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!

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