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

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

togetherhempco
Tourist
5 0 2

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.pngmobile_banner_2.png

 

Thanks in advance!

Replies 2 (2)

PaulNewton
Shopify Partner
6380 583 1358

For actual page performance, and not arbitrary business performance , 

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

<script> <!-- Global site tag (gtag.js) - Google Analytics -->

 

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

  gtag('config', 'AW-10789959196');
</script></script>

 

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

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


PaulNewton
Shopify Partner
6380 583 1358

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.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org