Archived topic
Mobile logo changes size on refresh: Perfect size initially and then too small
7 replies · Started by Ayon on May 22, 2020
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.
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 :)
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
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.
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:
- Load new staging site: https://swoopstaging2b.wpengine.com/ and logo should be fine
- Reload the page or click on the logo and the logo reduces in size
- 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?
Hi there,
can you try disabling your lazy loader plugin then clearing your caches and let us know if that was the issue.
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.
No problem :)
