[Resolved] Mobile Header/logo potrait vs landscape

Home Forums Support [Resolved] Mobile Header/logo potrait vs landscape

Home Forums Support Mobile Header/logo potrait vs landscape

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #532747
    Tristram

    Hey,

    Got my site up.

    The one issue I’ve noticed is the header is fine in landscape on an iPhone but the logo is expanded and wrong in portrait.

    I’ve disabled the mobile header, otherwise there is nothing in the header. All other pics load fine.

    Site here: https://seatoskycoffee.com/

    I see that others have mentioned this issue and that a resolution was in the works.

    Is there a solution for portrait on an iPhone (small mobile device?). I’m not sure I understand why it works in landscape but not portrait.

    Thanks

    Tristram

    GP Premium 1.6
    #533102
    Leo
    Staff
    Customer Support

    Hi there,

    I’m not sure if I understand the issue.

    Can you activate the mobile header again to show me?

    Thanks!

    #533201
    Tristram

    It’s enabled now. No header at all except the logo I put in there. That’s on my phone.

    Disabled the header is fine (like the desktop) in landscape and a mess in portrait.

    I want the mobile header disabled to show in portrait what one sees on the desktop and in landscape. The full pic even if small.

    In other words the header is not responsive when mobile in portrait when mobile header is disabled.

    Tristram

    #533231
    Tom
    Lead Developer
    Lead Developer

    What you’re seeing from the mobile header is normal – it’s meant to display an icon as your logo, not a full header.

    If you disable the mobile header, we can likely tweak the regular header a bit on mobile.

    Try this CSS (with mobile header disabled):

    @media (max-width: 768px) {
        .inside-header {
            padding: 10px;
        }
    }
    #533950
    Tristram

    Thanks Tom. That improves it a lot.

    I played with the padding a bit:


    @media
    (max-width: 768px) {
    .inside-header {
    padding: 0px 50px 10px 10px;
    }

    Now even easier to read the logo.

    Thank you again.

    tw

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