How to fix logo flicker on checkout page due to CSS and HTML size?

How to fix logo flicker on checkout page due to CSS and HTML size?

zomex
Explorer
65 1 19

Hello everyone,

 

Just a quick one that i hope someone can assist me with.

 

The logo on the checkout page has CSS applied as a max width and a HTML height. This causes my logo to flicker to the large size when the checkout page is loading before changing to the size of my image which is what I want.

 

I know it's not possible to add custom CSS to the checkout page so how can I remove this/stop the flicker?

 

Site: https://decorative-gold.myshopify.com/

Pass: bayldo

 

See attached.

 

flick.png

 

Thanks.

Web Developer - zomex.co.uk
Replies 4 (4)

zomex
Explorer
65 1 19

I am really supprised as how badly designed this is. The fact I limited to 3 options for the logo size.

 

If no one has a solution I will simply have to create the image at the size as per Shopify and use white space to reduce the logo size.

Web Developer - zomex.co.uk

marnau
Shopify Partner
9 0 2

Ok, I found a hack to fix this. As of today, the relevant css that's set to the img while it's loading is `max-width: min(100%, 1003px)`. Don't ask me why.

So what I did is create a logo image with these dimensions, and align the logo to the left and vertically centered. Voilà:

Captura de Pantalla 2024-03-01 a les 11.51.04.png

zomex
Explorer
65 1 19

Good job.

 

I did try this at the time but it didn't work for me.

 

It's crazy that something so basic is a issue with Shopify. Very disappointed how limited Shopify is.

Web Developer - zomex.co.uk
marnau
Shopify Partner
9 0 2

Did it work now?