Solved

How To Display Different Size Custom Liquid For Desktop & Mobile?

AdonisFineJewel
Tourist
8 0 1

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.

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
6915 1305 1333

This is an accepted solution.

Please use this code for your video code. 

<style>
video {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
video.mobile-video {
display: none;
}
@media (max-width: 767px) {
video.mobile-video { display: block !important; }
video.desktop-video { display: none !important; }
}
</style>
<video class="desktop-video" muted="" autoplay="" playsinline="" loop="">
    <source src="https://cdn.shopify.com/videos/c/o/v/b61861c4b47d4fb1aae2a90fc5b6e949.mp4" type="video/mp4">
    <source src="/media/cc0-videos/flower.mp4" type="video/mp4">
</video>
<video class="mobile-video" muted="" autoplay="" playsinline="" loop="">
    <source src="https://cdn.shopify.com/videos/c/o/v/b61861c4b47d4fb1aae2a90fc5b6e949.mp4" type="video/mp4">
    <source src="/media/cc0-videos/flower.mp4" type="video/mp4">
</video>

And add desktop video for video element has class="desktop-video"

and mobile video for video element has class="mobile-video"

Screenshot_6.jpg

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 17 (17)

Dan-From-Ryviu
Shopify Partner
6915 1305 1333

Hi @AdonisFineJewel 

Please drop your store link to check

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

AdonisFineJewel
Tourist
8 0 1

Hello @Dan-From-Ryviu 

store link is

https://adonisfinejewellers.co.uk/

thanks for your response

Dan-From-Ryviu
Shopify Partner
6915 1305 1333

Hi @AdonisFineJewel 

Please add this code to your theme.liquid file after <head> tag

 

<style>
#shopify-section-template--20590318321965__98244dc4-1a51-44c0-a9ea-d2b166c8ed08 video {
    max-height:700px;
    background: #e1d1e9;
}
</style>

 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

AdonisFineJewel
Tourist
8 0 1

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?

Dan-From-Ryviu
Shopify Partner
6915 1305 1333

Please update code to this and check 

<style>
#shopify-section-template--20590318321965__98244dc4-1a51-44c0-a9ea-d2b166c8ed08 video {
    max-height:700px;
    background: #e1d1e9;
}
</style>

 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

AdonisFineJewel
Tourist
8 0 1

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.Capture12.PNG

Dan-From-Ryviu
Shopify Partner
6915 1305 1333

Your ratio of video is 9:16 so if you want it fit to left and right, please convert it to 16:9

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

AdonisFineJewel
Tourist
8 0 1

Alright I will get that converted now,

How do I then use the 9:16 for mobile and the 16:9 on desktop?

 

Dan-From-Ryviu
Shopify Partner
6915 1305 1333

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.

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

AdonisFineJewel
Tourist
8 0 1

Alright, I hate to be a pain, Would you please guide me through how I would go about doing that?

Dan-From-Ryviu
Shopify Partner
6915 1305 1333

This is an accepted solution.

Please use this code for your video code. 

<style>
video {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
video.mobile-video {
display: none;
}
@media (max-width: 767px) {
video.mobile-video { display: block !important; }
video.desktop-video { display: none !important; }
}
</style>
<video class="desktop-video" muted="" autoplay="" playsinline="" loop="">
    <source src="https://cdn.shopify.com/videos/c/o/v/b61861c4b47d4fb1aae2a90fc5b6e949.mp4" type="video/mp4">
    <source src="/media/cc0-videos/flower.mp4" type="video/mp4">
</video>
<video class="mobile-video" muted="" autoplay="" playsinline="" loop="">
    <source src="https://cdn.shopify.com/videos/c/o/v/b61861c4b47d4fb1aae2a90fc5b6e949.mp4" type="video/mp4">
    <source src="/media/cc0-videos/flower.mp4" type="video/mp4">
</video>

And add desktop video for video element has class="desktop-video"

and mobile video for video element has class="mobile-video"

Screenshot_6.jpg

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

AdonisFineJewel
Tourist
8 0 1

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.

AdonisFineJewel
Tourist
8 0 1

Alright Perfect that seems to have worked now, I have just tested mobile and desktop. Very much appreciated on the help.

Dan-From-Ryviu
Shopify Partner
6915 1305 1333

Happy I could help

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

Joi_Johnston
Excursionist
20 0 4

Hi, I am running into the same issue. Where should I put this code?

Joi_Johnston
Excursionist
20 0 4

Screenshot 2024-01-03 at 3.54.48 PM.png

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!!!

theycallmemakka
Shopify Partner
1157 249 267

Hi @AdonisFineJewel ,

 

Please provide link to your store.

❤️❤️

Buy me a coffee


For quick response - Message Me


For easy store customization, try PageFly
Add Winter vibe to your store