Why is my slideshow text not displaying properly on mobile view?

Store Design
, , ,

Topic summary

A user embedded text directly into slideshow images rather than using theme heading fields. This causes display issues on mobile devices, where empty heading placeholders appear as large white boxes or grids.

Proposed Solution:
Another user provided CSS code to hide the mobile text wrapper and adjust button display:

  • Hide .slideshow__text-wrap--mobile on screens under 749px
  • Adjust button styling to display inline with inherited height
  • Remove transforms and adjust positioning

Current Status:
After initial implementation, the user reported persistent issues with double buttons and white grid elements still visible. A corrected CSS snippet was then provided to properly target and hide the mobile text wrapper.

The discussion involves troubleshooting custom CSS to resolve conflicts between image-embedded text and theme’s built-in slideshow text elements.

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

Hi guys,

I have text as a part of the slides images design, I didn’t use the theme building Heading and Sub-Heading. In desktop view, no issues, but in mobile view, the placeholder of the headings is visible with a big white background.

Alliance_0-1673274770675.png
Alliance_0-1673274770675.png1920×1040 315 KB

Screenshot_20230109-172032_Chrome.jpg
Screenshot_20230109-172032_Chrome.jpg1080×1920 155 KB

Thank you,

allianceautoproducts.com

1 Like
2

Hi @Alliance

@media(max-width: 749px){
	.template-index .slideshow  .slideshow__text-wrap--mobile {
		display: none!important;
	}
	.template-index .slideshow  .slideshow__btn {
		display: inline-block!important;
	    min-height: inherit!important;
	    line-height: 1;
	    max-width: 39%;
	    margin-left: auto;
	    font-size: 2vw;
	}
	.template-index .slideshow__text-wrap--desktop .slideshow__text-content {
	    top: auto!important;
	    bottom: 8%!important;
	    transform: none!important;
	}
}
3

Screenshot_20230110-004829_Chrome.jpg
Screenshot_20230110-004829_Chrome.jpg1080×1920 160 KB

Hi,

Got double buttons and white grid still there.

4

Hi @Alliance

sorry it should be

.template-index  .slideshow__text-wrap--mobile {
		display: none!important;
	}

Not

.template-index .slideshow  .slideshow__text-wrap--mobile {
		display: none!important;
	}

Remove .slideshow