Storefront on mobile devices

Hi there!

We’ll be happy to try and help with this.

Do you have a fallback image set for the video? The fallback image section was added in Parallax Hero 1.5.3. As things stand, it’s an either / or scenario – meaning if you have a fallback image defined, then it will use that image on mobile devices. If you don’t, it’ll try to show the video instead.

The “trying” part is key– by default, websites have a hard time determining upfront what browser is being used, the capabilities of the mobile device, the speed of the network, or being aware of Javascript errors that might influence video playback. That means that if any of those things go wrong, the video might not work and the page will look weird. For that reason, using a fallback image is a far better solution as it gives the user a stripped-down functionality without sacrificing style.

But as I said, if no fallback image is defined, then Storefront / Parallax Hero has no option but to try and display the video.

As regards making the page wider, I’m not sure exactly how that would work; are you talking about reducing the margins? There are a couple things you could do to reduce scrolling– I notice a bunch of custom styles, perhaps applied through the customizer, e.g. .vc_custom_1511612955776 { padding-bottom: 110px !important;}, which are making the page very long with a lot of empty vertical space in mobile layouts.

You could reduce/eliminate those, and/or tweak the font size for mobile via CSS; please let us know if you need further assistance with that

hi @allsupermoto – one of the best places to start with CSS is here: https://www.w3schools.com/css/default.asp