[Resolved] Mobile logo changes size on refresh: Perfect size initially and then too small

[Ayon]

Love the theme.

Everything has been perfect and we are about to launch but naturally, I just found an issue on mobile that I can’t replicate in any mobile emulators on my desktop.

I tried this recommendation from the support in my child style sheet (this is easier to standardize than using the customizer spacing). No luck with that solution.
https://generatepress.com/forums/topic/mobile-logo-size-3/

Here is some code that I have in my child style sheet:

.site-logo.mobile-header-logo img {
	height: 29px;
	padding: 0;
}	

/* Mobile settings under 768px */

@media (max-width: 768px) {

	.site-logo.mobile-header-logo img {
	height: 29px;
	padding: 0;
	}	

I added it to both media queries (desktop and mobile) out of exhaustion/frustration.

Here are the screenshots of the issue on my iPhone X.

Logo large (probably too large). The logo starts at this size initially.
https://drive.google.com/file/d/1hN4SYKjUykTadDWjPRDa28mVUU_CUBk6/view?usp=sharing

Logo too small. The logo reduces to this size after you refresh the page or navigate to another page.
https://drive.google.com/file/d/1tDTEYk75LWDKfchRrcEFF767-GPkmHO4/view?usp=sharing

Logo highlighted at the small size:
https://drive.google.com/file/d/1lU8ojoIkmGUecGjhYQ_Q_1e41Pjqz2lj/view?usp=sharing

Help. I’m going crazy troubleshooting on this one. Thanks.

[Leo]

Hi there,

Can you first try removing the CSS you’ve added and try to control the logo size using the menu item height with mobile toggle activated?
https://docs.generatepress.com/article/menu-item-height-width/

Let me know 🙂

[Ayon]

I removed my code.

I tried to control the size with the customizer and I set the height on both the Primary Nav and the Sticky Nav at 55px.

Primary Nav settings:
https://drive.google.com/file/d/1yyQFU6SLQHo5fl7UKvY8Tz6deberDE7e/view?usp=sharing

Sticky Nav settings:
https://drive.google.com/file/d/11R2hnjdF5F6mh9l8Y0M0OdNnzutLmf9F/view?usp=sharing

I am still seeing the same issue on an iPhone X iOS 13.3.1 in Google Chrome.

Anything else I can try?

Thanks!

Let me know of anything else I

[Leo]

Can you try clearing your browser cache?

Just checked on my phone and the logo size is nice and big and not changing on sticky navigation.

[Ayon]

I cleared my browser cache with WPEngine and Cloudflare and pushed the dev site to a staging environment and I still have the same issue.

Try these steps to replicate the issue on your phone:

1. Load new staging site: https://swoopstaging2b.wpengine.com/ and logo should be fine
2. Reload the page or click on the logo and the logo reduces in size
3. Opening the site in a new browser window and it resets to the preferred size and then reduces as before if the user reloads the page

Here is a screen recording:
https://drive.google.com/file/d/1bq4kIn0O2teVnNxiRIXk20_fMtJ1FR47/view?usp=sharing

The image is an SVG and used for both the logo and Retina logo in Site Identity and Header and Sticky Navigation. Is it too big? Should I use different sizes or file types for mobile?
https://swoopstaging2b.wpengine.com/wp-content/uploads/2020/05/Swoop-logo-green.svg

I commented out my entire child theme stylesheet as well. I don’t want to switch to the Parent GP theme as I fear my Customizer settings will be lost?

Any advice?

[David]

Hi there,

can you try disabling your lazy loader plugin then clearing your caches and let us know if that was the issue.

[Ayon]

Grumble. Grumble. I am an idiot and should have followed better troubleshooting and issue resolution (that you also reminded me of).

It was the Autoptimize plugin that I installed before going live.

Thank you.
All clear.

[Leo]

No problem 🙂

[Author]

Posts