Support » Plugin: Smush - Lazy Load Images, Optimize & Compress Images » icon oversized during load

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Support Patrick – WPMU DEV Support

    (@wpmudevsupport12)

    Hi @tajmohamed30

    Sorry to hear you are having this problem.

    Could you please try to disable the Smush Lazy Load and check if this makes any difference?

    Would it be possible to send the link where we can see the problem?

    Best Regards
    Patrick Freitas

    Thread Starter tajmohamed30

    (@tajmohamed30)

    hi,

    Thanks for your support.

    I have disabled it but no use because I have installed smush for this issue.

    below is the link, use Pincode 600010 if prompted

    https://tajhalalmeats.com/product/chicken-biryani-cut-almadina/

    regards

    Thread Starter tajmohamed30

    (@tajmohamed30)

    note: this issue with every browsers except firefox

    Plugin Support Prathamesh – WPMU DEV Support

    (@wpmudev-support7)

    Hello @tajmohamed30,

    Could you try to add the following CSS to your site wp-admin Dashboard-> Appearance-> Customize-> Additional CSS.

    .wc-delivery-time-response .phoe-green-location-icon img{
    max-width:18px !important;
    }

    Click the Publish button on the left-hand sidebar top right and check if that works. Do let me know if it works.

    Thank you,
    Prathamesh Palve

    Thread Starter tajmohamed30

    (@tajmohamed30)

    Hi

    Thank you it worked but there is a shift of location(not in firefox but chrome/edge) while loading please refer below video link and need to avoid it.

    Please find below screening video link

    https://www.loom.com/share/96bafb0b302648b2930d524253e9d37a

    Plugin Support Adam – WPMU DEV Support

    (@wpmudev-support8)

    Hi @tajmohamed30

    You mean that “effect” of the size changing – being smaller first and bigger after page is fully loaded?

    Usually that’d be a case of a relevant part of CSS being loaded/applied too late but in this case it might actually be a case of… browser cache.

    You mentioned it’s happening only in Chrome/Edge but while I can see it on your video, I can’t replicate it in any of them. I’ve never visited the site before so for sure my browsers are getting fresh CSS assets.

    Did you try clearing browser’s cache and/or checking that in incognito mode?

    Is it happening for you in specific browsers or in Chrome/Edge on different devices?

    Kind regards,
    Adam

    Thread Starter tajmohamed30

    (@tajmohamed30)

    Hi Adam,

    Thanks for your support

    FYI – I have disabled cache plugin and cleared all cache and data and even though size-changing effect occurs during reloading in mobile/desktop on the non-firefox browsers

    I do have a CSS code(mentioned below) for zipcode plugin where a map icon and help text “available at 600010” is getting aligned.

    /*zipcode plugin align in product page*/

    @media only screen and (min-width: 767px) {
    .avlpin{
    padding-top:0px!important;
    margin-top:10px!important;
    padding-bottom:3px!important;
    background-color:rgba(0,0,0,0);
    text-align:left!important;
    }
    }

    @media only screen and (max-width: 767px) {
    .avlpin{
    padding-top:0px!important;
    background-color:rgba(0,0,0,0);
    margin-top:10px!important;
    padding-bottom:5px!important;
    text-align:left!important;
    }
    }

    /*icon oversized solution*/
    .wc-delivery-time-response .phoe-green-location-icon img{
    max-width:18px!important;
    margin-top:-3px!important;
    margin-right:-5px!important;
    }

    .pincode_static_text{
    font-size:16px!important;
    }

    /*end of zipcode plugin align in product page*/

    I have done a screening video(below link) of before and after applying the CSS code.

    https://www.loom.com/share/19055e71a0484d9190cd1fbd378d9ce3

    FYI – I have got the CSS code for oversize location marker from you and also both the before and after CSS code issues only with non-firefox browsers in mobile/desktop

    Regards

    Plugin Support Nithin – WPMU DEV Support

    (@wpmudevsupport11)

    Hi @tajmohamed30,

    Thanks for sharing a video regarding this by removing the CSS. If possible could you also please share a video on how the pin location image behaves without the CSS and with Smush plugin disabled? So that we could have a better idea regarding the issue?

    When I check the mentioned pin location image, it seems to have the following HTML structure

    <span class="phoe-green-location-icon">
    	<img src="path-to-icon/phoeniixx_pin_location_icon.png">
    </span>

    The above structure points the image isn’t lazyloaded by Smush. I don’t see Smush would be interfering or would cause such issue if the image isn’t lazyloaded in such use case.

    Could you please double-check how the page behaves with Smush disabled so that we could check further regarding this and see what might be causing it?

    Please do let us know how that goes so that we could help get you sorted asap.

    Kind Regards,
    Nithin

    Plugin Support Predrag – WPMU DEV Support

    (@wpmudev-support1)

    Thank you for using Smush. We are going to close this ticket for now because we have not heard from you in a while. If you still need support we can reopen the thread.

    Cheers,
    Predrag

Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.