Fix Featured Collection Image Position in Mobile

Topic summary

A user is experiencing an issue where featured collection images shift vertically when viewed on mobile devices.

Problem Details:

  • Images in the Featured Collection section are not staying in a fixed position
  • Issue only occurs in mobile view
  • User included a screenshot demonstrating the problem

Proposed Solutions:
Two community members provided CSS-based fixes:

  1. First solution: Add custom CSS code in the theme.liquid file, inserted above the </head> tag

  2. Second solution: Add CSS code before the </body> tag in theme.liquid, targeting the slider element with overflow-x: unset property for screens up to 767px width

Both solutions involve editing the theme’s liquid files through Shopify Admin → Online Store → Theme → Edit code. The discussion remains open with no confirmation yet on which solution resolved the issue.

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

Does anyone know how to make the position of the images in Featured Collection stay/fixed?

My featured collection moves up and down whenever i’m in Mobile view.

https://ee15bf-83.myshopify.com/products/beautiful-color-shampoo?_pos=1&_psq=beautiful&_ss=e&_v=1.0

Hi @thatshampooshop

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:


Hope this can help you, If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

Hello @thatshampooshop

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) { ul.slider.slider--tablet { overflow-x: unset !important; } }

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