Need advice on CSS code

Store Design
, , ,
1

I want my pictures to be different across devices (1 for mobile and another for desktop), and I found a CSS code that actually works (they hide the image based on size): https://community.shopify.com/post/2341624 (Here is the link).
However, my pictures are all cropped while I want it to display full original size. I’m using banner image for the picture and Dawn theme in general

PediStride_0-1715940172429.png
PediStride_0-1715940172429.png1522×1312 175 KB

Is there any way? I ask AI code but nothing works. It is either cropped or showing blank huge margin

2

Hi @PediStride ,

Can you share the store URL? After that I can assist you with the query.

Thanks

3

my URL is: pedistride.com

4

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. Paste the below code before on theme.liquid

If you need any further assistance or have any queries, feel free to contact me.

Was my reply helpful? Click Like to let me know!

Was your question answered? Mark it as an Accepted Solution and click like.

5

Hi @PediStride

Check this one. No worries its free, just follow the instruction well.

You can visit the website so you copy and paste the code.

Also this can use on image banner, slideshow etc.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!