Sense theme video with text overlay ISSUE on mobile.

Store Design
,

Topic summary

A user is experiencing issues with custom video overlay code on their Shopify store using the Sense theme. The code is intended to display a video with text overlay and a call-to-action button.

Technical Details:

  • The HTML includes a video container with autoplay settings and overlay text promoting a juicing product
  • The CSS code appears corrupted or reversed in the post, making it difficult to diagnose
  • The user wants to implement different video sources for mobile vs desktop devices

Current Status:

  • The implementation is not working as intended on mobile
  • The user has attempted multiple code adjustments without success
  • No responses or solutions have been provided yet

Key Issue:
The CSS styling code is displaying incorrectly (appears reversed/garbled), which may be preventing proper troubleshooting. The user needs help implementing responsive video sources and fixing the mobile display issue.

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

I have been desperately trying to play with my code to use a different video source on mobile, and nothing is working. Here is my code:

We reinvented juicing.
Unlock the energy, gut health, and immune support your body deserves.
.video-container, .video-container video { width: 100%; }

.video-container {
position: relative;
overflow: hidden;
}

.video-container::before {
content: “”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
}

.overlay {
position: absolute;
top: 48%;
left: 10%;
transform: translate(0%, 0%);
text-align: left;
color: white;
}

.container {
width: 100%; /* Set the width of your container */
}
.title {
font-size: 3em;
line-height: 0.8em;
}

.subtitle {
font-size: 1em;
line-height: 0.5em;
}

.button-section {
margin-top: 4vh;
}

@media (max-width: 600px) {
.title {
font-size: 2em;
line-height: 1;
}

.subtitle {
font-size: 1em;
line-height: 1.5;
}
.button-section {
margin-top: 2vh;
}

.text-block {
max-width: 300px;
margin: -110px auto 0; /* Set left and right margins to “auto” and add a top margin of -20px */
padding: 0;
}
}

WHY is this not working?

Site: coldpow.com

Pass: 24coldp