How can I fix text overlap error on mobile view for my store's background video?

Store Design
,
1

I have a background video on dawn theme, the background video has description text overlapping the video background. On desktop text placement looks normal, however on mobile the text is too big and too high. It becomes covered by the header and dosent fit the page. Can someone please help me fix this?

please check the “about us” section of my store as that is what i am referring to.

Store link: https://c1e46d.myshopify.com/collections

2

hello there

you can try this:

  1. Add a media query in your CSS: In your Shopify admin, go to Online Store > Themes > Customize theme > Theme options > Additional CSS. Add the following code:

@media only screen and (max-width: 767px) { /* Add your mobile-specific CSS styles here */ }

  1. Add the CSS code for the smaller text: Inside the media query you just added, add the CSS code to set the font size for the text you want to be smaller on mobile devices. For example:

.text-class { font-size: 12px; }

Replace “text-class” with the actual CSS class applied to the text you want to be smaller.

3

Thank you so much! it finally worked! However now i have a problem where the video background doesn’t loop / automatically play on mobile. It works fine on desktop but not mobile. How can i fix this problem?

4

Hi @suoshie ,

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

You should double-check your background video. In some cases, you need to convert your video so it can work well on mobile.

Hope you find my answer helpful!

Best regards,

Victor | PageFly