Mastering Mobile Slideshows: Hiding Crave Theme Text on Shopify

Hey there, fellow store owners! Ever found yourself scratching your head over a seemingly small visual glitch on your mobile site that just won't quit? You're definitely not alone. The Shopify community is a goldmine for these kinds of real-world problems and clever workarounds, and I recently stumbled upon a fantastic thread that tackled a common, yet super annoying, mobile display issue with the Crave theme's slideshows.

Taming the Crave Theme Mobile Slideshow Beast

The original poster, mk331, was facing a classic mobile optimization dilemma. On their Crave theme store, specifically on a commissions page, the slideshow was behaving perfectly on desktop. But on mobile? Ugh. Unwanted text boxes were popping up below the second, third, fourth, and subsequent photos in the slideshow. The kicker? They wanted to keep the text box on the first photo, but ditch the rest on mobile. This kind of selective display can be tricky with standard theme settings, often requiring a little custom CSS magic.

Why This Happens & Why It Matters

Many modern Shopify themes, including Crave and Dawn (which shares a lot of its DNA), are built to be highly flexible. Sometimes, this flexibility means that elements designed for desktop don't quite translate perfectly to the smaller mobile screen, or they create empty spaces when you don't fill them with content. A clunky mobile experience isn't just an aesthetic annoyance; it can seriously impact your conversion rates. Mobile shoppers expect a clean, fast, and intuitive browsing experience. Unwanted empty boxes or misaligned elements can make your store look unprofessional and drive customers away.

The Community's Brilliant CSS Fix

This is where the power of the Shopify community shines! Tim_tairli and ajaycodewiz jumped in with a really elegant CSS solution that targets these specific empty text boxes on mobile and ensures your images look great. Ajaycodewiz even went the extra mile, reproducing the issue, testing the code on a Crave/Dawn store, and providing clear before-and-after visuals – which, let's be honest, is always a huge help when you're messing with code! The core of their solution focuses on two things:

1. Hiding the text content wrappers for slideshow slides that have empty text.
2. Ensuring the media (your image or video) within those slides takes up 100% of the available height once the text is hidden, preventing awkward blank spaces.

Here's the CSS code they shared:

@media (max-width: 749px) {
  .banner__content:has(.slideshow__text:empty) {
    display:  none;
  }
  .slideshow__slide:has(.slideshow__text:empty) .slideshow__media {
    min-height:100%;
  }
}

Let's break down what this does:

• @media (max-width: 749px): This is a "media query." It tells your browser, "Hey, only apply these rules if the screen width is 749 pixels or less." This is crucial for targeting only mobile devices.
• .banner__content:has(.slideshow__text:empty) { display: none; }: This is the clever part. It looks for any banner__content element that contains (:has()) a slideshow__text element which is empty (:empty). If it finds one, it hides the entire content wrapper.
• .slideshow__slide:has(.slideshow__text:empty) .slideshow__media { min-height:100%; }: After hiding the text, this rule ensures that for any slide where the text was empty and now hidden, the actual image or video (.slideshow__media) within that slide stretches to fill 100% of the height. This prevents that "squished" or incomplete look you sometimes get when elements disappear.

Visualizing the Fix: Before & After

Ajaycodewiz's screenshots perfectly illustrate the impact. Before the CSS, you see the unwanted space below the image where the text box would normally be. After applying the code, the image beautifully fills that space, creating a much cleaner, more professional look on mobile.

Before

After

He also showed how it looked on the original poster's site:

Before

After

How to Implement This Fix on Your Shopify Store

Ready to clean up your own mobile slideshows? Here’s a step-by-step guide to adding this custom CSS to your Crave (or even Dawn) theme.

1. Back Up Your Theme (Crucial!): Before making any code changes, always, always, ALWAYS duplicate your live theme. Go to Online Store > Themes, find your current theme, click the Actions dropdown, and select Duplicate. This way, if anything goes wrong, you can quickly revert.
2. Access Your Theme Code: In the same Online Store > Themes section, click on Actions again, but this time choose Edit code.
3. Find the Right File: In the file explorer on the left, navigate to the layout folder and click on theme.liquid. This file controls the overall structure of your store's pages.
4. Paste the CSS: Scroll down in the theme.liquid file until you find the closing tag. You'll want to paste the CSS code just before this tag, wrapped in
   5. Save and Test: Click Save in the top right corner. Then, immediately open your store on a mobile device (or use your browser's developer tools to simulate a mobile view) and check your slideshow. Make sure the text boxes are gone on the intended slides and your images look great!

   An Alternative Approach for Specific Slides

   While the :has(.slideshow__text:empty) solution is fantastic for empty text boxes, what if your text boxes aren't truly empty, but you still want to hide them on specific slides (like all but the first)? Steve_TopNewYork offered another valid approach that directly targets all slides except the first one:

   @media screen and (max-width: 749px) {
   .slideshow__slide:not(:first-of-type) .slideshow__text-wrapper {
   display: none !important;
   }
   }

   This code uses :not(:first-of-type) to exclude the very first slide from having its text wrapper hidden. This might be a good alternative if you actually have content in those subsequent text boxes but simply don't want it displayed on mobile. Remember, !important should be used sparingly, but can be necessary to override existing theme styles.

   Wrapping It Up

   Dealing with mobile display quirks can be frustrating, but as this community thread shows, often a simple CSS tweak is all it takes to make a huge difference. A responsive and aesthetically pleasing mobile storefront is absolutely essential for today's e-commerce landscape. It's these small but impactful optimizations that help create a seamless shopping experience and keep your customers happy. If you're looking to start your own online store and want a platform that offers both robust features and a thriving community ready to help with these kinds of challenges, then Shopify is an excellent choice. It's truly amazing what we can achieve when we share our knowledge and help each other out!