[Resolved] Logo Squished on Mobile… sometimes… randomly

[Gina]

I have a situation where my logo is squished on mobile. It’s fairly prevalent but is random. I’m not sure if it’s a CSS issue, caching issue or something else.

I’m using Generate Press, Elementor (but not for the menu) and WP Rocket (and Cloudflare). It’s happing on all my sites, store.trailsisters.net, calendar.trailsisters.net…

Any ideas?

I can e-mail you a screen shot if needed.. Essentially it’s a rectangular logo and sometimes the width of the logo seems to be constrained to a square squishing it laterally…

Any ideas are welcome!

[Tom]

Hmm, I can’t get it to happen. Does it still happen if you turn off lazy loading?

[Gina]

Not sure.. just turned off Lazy Load in WP Rocket and will test for a bit and let you know!

Surprised to hear that you were not able to re-create I’m using an iPhone XS and it’s pretty often. I would say 1 out of every 5 page loads…

Tks.

[Tom]

I have a feeling it’s the lazy loading. If it is we should be able to solve it quite easily.

Let me know 🙂

[Gina]

I think you’re right, I’ve disabled lazy load in WP Rocket for the main domain (trailsisters.net) and haven’t been able to re-create.

LazyLoad is enabled in the sub-domains and it continues to be an issue there..

I don’t see a setting or place where I could manually exclude a file from the lazy load.

What would be the process to exclude the menu / logo from the lazy load but enable it for the rest of the page?

Thanks in advance!

[David]

Hi there,

if its WP Rocket lazy loader then they provide this document for excluding images:

https://docs.wp-rocket.me/article/15-disabling-lazy-load-on-specific-images

The exclude by file name is probably the simplest one to apply in this case.

[Gina]

Hi David,

I’m not that knowledgable with php and wondered if you would be able to confirm if the below lines look correct? (I’m trying to us their plugin to exclude my logo from the lazyload).

It requires a manual edit and I don’t want to mess it up.

Thanks in advance!

// EDIT/REPLACE THESE EXAMPLES:

$excluded_src[] = ‘trailsisters.net’; //
$excluded_src[] = ‘/wp-content/uploads/2019/01/TrailSisters_Logo.png’; //
$excluded_src[] = ‘/?s=TrailSisters_Logo.png’; //

// STOP EDITING.

[David]

So adding PHP can be done in two ways, if you have a Child Theme installed there is a functions.php where you can simply edit and add the code. If you’re not using a child theme then install the Code Snippets plugin, create a new snippet and the function there.

To eliminate lazyload on just the logo it would be this function:

function rocket_lazyload_exclude_src( $src ) {
	$src[] = 'TrailSisters_Logo';

	return $src;
}
add_filter( 'rocket_lazyload_excluded_src', 'rocket_lazyload_exclude_src' );

[Gina]

Thank you, worked perfectly!

[David]

You’re welcome

[Author]

Posts