icon oversized during load

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

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

note: this issue with every browsers except firefox

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

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

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

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

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

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