Slideshow Section - Subheading Text Opacity - Its too see through!

Store Design
,

Topic summary

Main issue: Subheading text in a Shopify slideshow appears semi-transparent; the goal is solid (non-transparent) subheading text on both desktop and mobile.

Context: OP had already adjusted size/position via custom CSS (e.g., .banner__text.rte { font-size: 20px; }) but couldn’t remove the see-through effect.

Proposed fix: Add CSS to override the text color (which effectively removes the perceived opacity) per device:

  • Desktop: .banner__text p { color: #000; }
  • Mobile (initial suggestion): .banner__text p { color: #fff; }

Outcome/adjustments:

  • Desktop solution worked as given.
  • Mobile required a more specific selector for the mobile layout: .slideshow__text-mobile–left p { color: #fff; }.
  • OP is also using a media query to hide the slideshow on desktop: @media (min-width: 768px) { slideshow-component { display: none; } }

Status: Resolved. The subheading text now appears solid on both desktop and mobile using device-specific selectors. An attached screenshot illustrated the opacity issue but wasn’t essential to the solution.

Summarized with AI on January 3. AI used: gpt-5.
4

Add this code to Custom CSS of desktop image banner section

.banner__text p {
color: #000;
}

And this code for mobile banner image section

.banner__text p {
color: #fff;
}