[Resolved] Mobile header looks different on iOS and Android phones

[Sue]

I’ve been working on a website using GP’s Read theme, and I wanted the mobile header (which features a logo and site title) to look more like the desktop version. It looked fine on my Android, but I’ve been informed that it does not look correct on an iPhone. Is there any way for me to troubleshoot this? When I use WordPress’ feature to check the mobile version (customize -> click on the mobile icon), I don’t see the problem, but the iPhone screenshot I was sent has the site title on top of the logo.

[David]

Hi there,

can you remove this CSS:

.site-logo.mobile-header-logo img {
    height: auto !important;
    width: 80px;
	padding-top: 100px;
}
.site-logo.mobile-header-logo img {
	display: inline; 
	margin-top: 10px; }

.mobile-header-logo-title {
        color:#000;
	display: inline;
	font-weight: normal;
	font-size: 25px;
        font-family: "Source Serif Pro", serif;
        margin-left: 10px;
	padding: 80px 0 15px;
        position: absolute;
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
}

And then i can provide Some CSS to create the layout you require

[Sue]

I have removed it.

[David]

Try this CSS:

@media(max-width: 1040px) {
    .main-navigation .menu-bar-item > a {
        line-height: 80px !important;
    }
    .site-logo a {
        display: flex;
        align-items: center;
    }
    .mobile-header-navigation .site-logo.mobile-header-logo img {
        margin-right: 20px;
        height: 80px;
    }
    .mobile-header-logo-title {
        font-size: 25px;
    }
}

[Sue]

Thanks — I have made that change and asked the person who was checking it on her iPhone to take a look at it. (It still looks fine on my Android.)

[David]

It looks great on my iPhone 🙂
If your colleague still sees an issue, then ask them to make sure the browser caches have been cleared.

[Sue]

She says it looks fine now, so thank you for your help!!

[David]

Really glad to hear that!

[Author]

Posts