hide an animation over the image banner for the mobile version of my website

Store Design
,

Topic summary

A user wants to hide a rotating animation on their mobile site’s image banner while keeping it visible on desktop. Before hiding it, they also need to redirect the animation to their collections page (https://swaws.store), similar to the desktop version.

Two solutions were provided:

  • Solution 1 (BSS-TekLabs): Add CSS code to base.css or theme.css file:

    @media only screen and (max-width: 600px) {
  .animation_image img {
    display: none !important;
  }
}

  • Solution 2 (niraj_patel): Insert CSS in theme.liquid file before </body> tag:

    @media screen and (max-width: 767px) {
  .banner .animation_image {
    display: none !important;
  }
}

Both solutions use media queries to target mobile devices specifically. A follow-up question confirmed these solutions only affect the mobile version, not desktop. Screenshots were included showing implementation steps.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

can you hide the rotating animation only on the mobile version of my website and also before hiding attach the link same as desktop website where it is redirecting it to collections page https://swawe.store/

1 Like
2
  • Here is the solution for you @attackon
  • Please follow these steps:

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg
z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg1865×854 94.6 KB

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
@media only screen and (max-width: 600px) {
.animation_image img {
    display: none !;
}
}
  • Here is the result you will achieve:

BSSTekLabs_0-1723038820128.png
BSSTekLabs_0-1723038820128.png363×812 112 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like
3

Hello @attackon

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

@media screen and (max-width: 767px) { .banner .animation_image{ display: none !important; } }

niraj_patel_0-1723038955205.png
niraj_patel_0-1723038955205.png316×511 42.6 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

4

Great! But will it work separately for mobile version only as initially asked?

1 Like
5

Yes. It only works on mobile version.

1 Like