[Resolved] Logo Squished on Mobile… sometimes… randomly

Home Forums Support [Resolved] Logo Squished on Mobile… sometimes… randomly

Home Forums Support Logo Squished on Mobile… sometimes… randomly

  • This topic has 9 replies, 3 voices, and was last updated 2 years ago by David.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #917304
    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!

    #917346
    Tom
    Lead Developer
    Lead Developer

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

    #917355
    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.

    #917772
    Tom
    Lead Developer
    Lead Developer

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

    Let me know 🙂

    #917781
    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!

    #917797
    David
    Staff
    Customer Support

    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.

    #920151
    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.

    #920434
    David
    Staff
    Customer Support

    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' );
    #926463
    Gina

    Thank you, worked perfectly!

    #926589
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.