Custom metafield image banner size - adjust to window

Store Design
1

I have a custom section calling a metafield image on my product pages.
I need the image to be automatically centred and adjust it’s size depending on the window/device in a fluid manner so it displays on mobile/desktop nicely.

the image is called by {{product.metafields.custom.product_header_banner | img_url: ‘x200’ | img_tag}} in my custom section.

I need to be able to centre the image, have it resize automatically and stop the website from showing the ‘no image’ placeholder when there’s no image set on the product page metafield yet.

Looking forward to your advice here!

Example page: https://buycarpetonline.uk/products/pastiche-loop

2

Hi Netrovert

To have your image resize depending on your device’s screen, you’ll need to use CSS Media queries or set a percentage on the image’s max-width CSS.

If you find need extra support, I’d be happy to assist for a flat fee of $20. Feel free to reach out if you have any questions or need further guidance!

Good luck!