How can I create a transparent background for my mobile slideshow?

Topic summary

Goal: Make the mobile slideshow background transparent (desktop already looks correct). The original poster reports a persistent white background on mobile and shares their site URL and a screenshot.

Proposed solution: Add custom CSS in Shopify. One reply instructs to edit Online Store → Themes → Edit code → Assets → theme.scss.liquid and append a mobile-only @media (max-width: 767px) block. It sets .slide-content.slide-content-mb .slide-heading to background-color: transparent, and overrides a specific section ID to background-color: #ffffff. The CSS snippet is central to the fix.

Clarifications needed: Another participant cannot find theme.scss.liquid (possibly a different or updated theme structure) and asks if it has a new name and whether the code should go at the very end of the file. A different user provides their store link for review/testing.

Notes: The code, site links, and the screenshot are important to understanding. “theme.scss.liquid” refers to the theme’s stylesheet; the @media rule targets mobile screen widths.

Status: No confirmation that the fix worked. File-location questions remain unanswered; discussion appears ongoing.

Summarized with AI on January 24. AI used: gpt-5.

Hi there,

I am having trouble finding theme.scss.liquid - could it be named something else now that we’re in November?

When you say paste it at the end, do you mean after everything, even if it is at the very very end, after all closing of brackets?