How to make an imagine appear differently depending on desktop/mobile?

Store Design
1

Hello everyone,

I have this image on my store:

GLW_MID.png
GLW_MID.png5001×372 34.2 KB

How it appears on desktop is fine, but on mobile its barely readable.

I was wondering if its possible to split the image in two, and have them stack up on eachother on mobile so its more user friendly.

Does anyone know how to do this, or if its better to not use an image and add the elements (background color, vectors, text) by code instead?

Any help is greatly appreciated.

Thank you!

URL: https://glowee.nl/

2

I’d recommend creating each part of that image as a separate icon and text, that way you can make them responsive so they’ll be appropriately resized on mobile.

Some themes offer an image gallery, logo list or multi-column section that you might be able to use for this purpose. Otherwise this would be something that could be added as a custom section.