Flickity buttons disappear on smaller screens

Store Design

Topic summary

A user encountered an issue where Flickity carousel navigation buttons disappeared on screens below 1000px width, causing content to be cut off in the “our favourite collections” and “spack.au” sections on their Shopify store (risingsunfpv.com.au).

Root Cause:
The theme was designed to disable Flickity on smaller screens, assuming touch-enabled devices wouldn’t need navigation buttons. The class changed from “collections-list” to “collections-list flickity enabled” based on screen size.

Solution Provided:
A CSS override was shared to force Flickity to remain enabled at all screen sizes:

  • Add custom CSS code to the theme’s “Custom CSS” setting
  • The code ensures Flickity stays active and positions the prev/next buttons correctly
  • User should test on mobile devices to verify no conflicts occur

Status: Resolved. The user confirmed the CSS fix worked after adding it to their theme file.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

On our website, the screen can shrink to fit smaller screens so we need flickity buttons for certain sections, however while under 1000 pixels, the buttons disappear and our content gets cut off, how do we fix this??

2 Likes
2

Please share the link to your website.

3

Hello @FPS17

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

1 Like
4

https://risingsunfpv.com.au/

When compressed to 1000px or lower the flickity buttons disappear on “our favourite collections” and “spack.au”

5

https://risingsunfpv.com.au/

When compressed to 1000px or lower the flickity buttons disappear on “our favourite collections” and “spack.au”

6

Hey @FPS17 .,

Thanks for reaching out!

I checked the URL you shared, and I’m not seeing the Flickity slider buttons — neither above nor below 1000px screen width. It looks like the buttons may not be implemented yet for that section.

We’ll likely need to modify your featured-collection.liquid file to properly add the navigation buttons. I’d love to help get that sorted.

Feel free to DM or email over your collaborator code. We’ll create a duplicate of your live theme, implement the buttons there, and once you’re happy with how it looks, you can safely publish it.

Cheers,
Shubham | Untechnickle

1 Like
7

Well It has something to do with it going from a class called “collections-list” to “collections-list flickitiy enabled” meaning that this is a layout issue correct as content is being overridden and replaced correct??

8

Here is the reasoning behind this:

  • on a wide screen (presumably desktop) use flickity.
  • on a narrower screen (presumably mobile or tablet, which have touch) disable flickity and simply drag with finger.

We can override this.

Add the following to the “Custom CSS” setting of the theme:

.collection-list:after {
  content: "flickity";
}
.flickity-prev-next-button.previous {
  left: 0 !important;
}
.flickity-prev-next-button.next {
  right: 0 !important;
}

This will ensure flickity is always enabled, but you would need to test on mobile whether it conficts with something.

9

Added this to the bottom of the file and it worked, thank you

1 Like