Archived topic

Mobile header looks different on iOS and Android phones

7 replies · Started by Sue on October 29, 2021

Viewing posts 1–8 of 8

October 29, 2021 at 9:27 pm #1983459

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.

October 30, 2021 at 5:48 am #1983800

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

October 30, 2021 at 9:32 am #1984293

I have removed it.

October 30, 2021 at 5:46 pm #1984593

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

October 31, 2021 at 11:10 am #1985630

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.)

October 31, 2021 at 12:10 pm #1985681

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.

October 31, 2021 at 2:19 pm #1985764

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

November 1, 2021 at 4:20 am #1986319

Really glad to hear that!

This archived topic is closed to new replies.

Start building better websites today.