Hi community, the product images on the product page are just fine, but the videos look huge on desktop. Can anyone help reducing their size for desktop ?
https://www.elegancebyselin.com/products/alice-earrings
Password: daumas
Hi @Daniel19901 ,
Thank you for your question. After taking a look at your store, you can try to add the following code to your Custom CSS inside your Theme Editor to reduce the video size on desktop view:
.plyr video, .plyr audio, .product__grid–slides .flickity-viewport {
height: 500px !important;
}
And you should get the result as the image below:
If the method above didn’t work, you can add the code directly to the Theme CSS, you also change the px number to adjust the size of video as you prefer.
I hope my answer is helpful!
Best,
Liz.
Hi again @Daniel19901 ,
After checking one more time, I highly recommend you replace the previous code I shared above with this new code:
@media only screen and (min-width: 768px) {
.plyr video, .plyr audio, .product__grid–slides .flickity-viewport {
height: 500px !important;
}
}
This new set of code still works fine for desktops but it will also ensure the video on the mobile view won’t be accidentally extended.
Best,
Liz.