How can I optimize mobile display and video play in Turbo Theme?

Shopify Discussion
,
1

I would love some help regarding how to optimize for mobile and fix/customize the below from my theme: https://wt75hw60mjx6umz3-42835378336.shopifypreview.com

How do I optimize these for mobile so that the sizes of the buttons are smaller on mobile and so that the banner video plays automatically? And how do I make sure the video plays automatically on mobile?

mobile_banner_1.png
mobile_banner_1.png756×458 228 KB

mobile_banner_2.png
mobile_banner_2.png752×422 242 KB

Thanks in advance!

2

For actual page performance, and not arbitrary business performance ,

fix the orphan opening script tag around this part of code in the theme:


which may or may not also be related to an excess closing tag:

```markup
gtag('config', 'AW-10789959196');

Bad html can cause all types of issues including weird behavior with media assets or video.

3

If there is text in the actual video itself your gonna have a bad time trying to constantly keep HTML elements aligned to the video across screen sizes.

To reposition for smaller screens with a CSS band-aid use a custom css setting and CSS like the following targeting the text container:

@media only screen and (max-width: 798px)
 .video__text-container {
     transform: scale(0.6);
     left: -20px;
 }
}

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

Beyond that for DIY search the forums for such a common topic.

Leave out the “optimize” though that’s misleading and nothing to do with changing CSS like this .

If you need better customization such a specific layout or video for small screens then contact me by my email for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.