[Resolved] Mobile Header/logo potrait vs landscape

[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

[Leo]

Hi there,

I’m not sure if I understand the issue.

Can you activate the mobile header again to show me?

Thanks!

[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

[Tom]

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

[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

[Tom]

You’re welcome 🙂

[Author]

Posts