Video background text not shown on mobile version

Video background text not shown on mobile version

Emmacharle
Visitor
3 0 1

Hi everyone,

 

I added code for a video background (https://youtu.be/-Zy-gHGQDtU?si=TfnAWuTN0EJWuRDC) to my website. Unfortunately the text overlay on the mobile version has disappeared and I am unsure as to why. I have tried lots of different fixes but cannot seem to figure it out! 

 

I used the code on dawn theme. Any advice and fixes would be greatly appreciated!  

 

Thank you! 

Emma 

 

Replies 2 (2)

PageFly-Theodor
Shopify Partner
691 86 98

Hi @Emmacharle ,
This is Theodore from PageFly - Shopify Page Builder App.

Emma's text overlay on mobile video background is missing! Here's how to fix it:

Possible Causes:

  • Missing mobile styling (media queries).
  • Conflicting mobile styles.
  • Low z-index value hiding the text.

Fixes (using Shopify theme editor):

  1. Media Queries: Add media queries to adjust text styles for mobile screens.
  2. Check Conflicting Styles: Ensure no mobile styles unintentionally hide the text.
  3. Adjust Z-Index: Increase the z-index value of the text overlay element.


Best regards,
Theodore | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Emmacharle
Visitor
3 0 1

Hi Theodor,

 

thank you for your response. Unfortunately I am not well versed in website development and I am uncertain on how to go about the solutions you proposed, would you mind providing me with more guidance? 

many thanks,

Emma