Mobile layout issue: a text overlay that appears over the video on desktop shifts to a separate box below the video on mobile on a Shopify store. The poster tried multiple CSS fixes without success.
Suggested fix: add CSS at the end of base.css using a mobile breakpoint (max-width: 767px) to style .videoBackground .videoBoxInfo with background: transparent; position: absolute; and z-index: 100. One participant shared a screenshot showing the intended mobile overlay and noted the text color can be adjusted. The image is central to visualizing the expected result.
Technical notes: a CSS media query applies rules at specific screen widths (e.g., ≤767px for mobile). Position: absolute places the overlay on top of the video, while z-index controls stacking order so the text sits above.
Alternative step: another participant advised pasting code at the bottom of theme.liquid, but no actual code content was provided in the excerpt.
Outcome: no confirmation that the changes resolved the issue; the thread remains open.
https://strasburg-railroad.myshopify.com/
On the desktop version Retail at Strasburg Railroad Overlays the video nicely. On the mobile version it appears as a text box below the video. I have been working on this for hours. I have followed endless tutorials for adding codes to certain .css files etc. None of the normal codes additions seems to fix it on the mobile platform so I am now surrendering and asking for assistance.
@Strasburg - it will be like this, is it ok? you can change text color
@Strasburg - please add this css to the very end of your base.css file and check
@media screen and (max-width: 767px){
.videoBackground .videoBoxInfo {background: transparent;position: absolute; z-index: 100;}
}
Hi @Strasburg ,
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file theme.liquid
Step 3: Paste the below code at the bottom of the file → Save
Hope my solution works perfectly for you!
Best regards,
Oliver | PageFly