Hello everyone,
Would anyone please be able to assist me, I have a custom liquid video on my landing page (studio theme). On mobile the size is perfect but on desktop it is hilariously large. Is it possible to change ONLY the desktop size while keeping mobile the same?
Any help would be greatly appreciated, thanks in advance.
Please drop your store link to check
Hi @AdonisFineJewel ,
Please provide link to your store.
Thanks you for responding.
The height was absolutely perfect, is it possible now to get the video to fill the screen width ways from border to border while keeping that height?
Please update code to this and check
Very close but it is still slightly off. Is there no way to get the entire video to fill rather than just a block colour?
The video was filling before it was just far too tall. Now as you can see the video height is great but it has block colours to either side that don’t quite match.
Your ratio of video is 9:16 so if you want it fit to left and right, please convert it to 16:9
Alright I will get that converted now,
How do I then use the 9:16 for mobile and the 16:9 on desktop?
You can add 2 sections, mobile section use 9:16 and desktop section will use 16:9 and then add custom code to hide the mobile section on desktop and the desktop section on mobile.
Alright, I hate to be a pain, Would you please guide me through how I would go about doing that?
Please use this code for your video code.
And add desktop video for video element has class=“desktop-video”
and mobile video for video element has class=“mobile-video”
I am just looking now, I don’t see where to add the codes you have sent here. I tried to add them into custom CSS but that did not work. Where should I be adding them?
Edit: I have just seen you sent a further guide.
Alright Perfect that seems to have worked now, I have just tested mobile and desktop. Very much appreciated on the help.
Happy I could help
Hi, I am running into the same issue. Where should I put this code?
the custom liquid looks crazy in the mobile view. I’ve been trying to solve this for a week any help would be much appreciated!!!
Hi Dan, would you be able to help me with a similar issue that i posted here: https://community.shopify.com/c/shopify-design/code-for-desktop-version-and-mobile-version-for-custom-liquid/td-p/2647940
