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
Topic summary
A user seeks help reducing the size of product page videos on desktop, as they appear too large compared to product images.
Initial Solution:
- Add CSS code targeting
.plyr video,.plyr audio, and.product__grid--slides .flickity-viewportwithheight: 500px !important; - Apply via Custom CSS in Theme Editor
- Adjust pixel value as preferred
Revised Recommendation:
- Wrap the CSS in a media query:
@media only screen and (min-width: 768px) - This ensures the video size reduction applies only to desktop views (768px and wider)
- Prevents unintended mobile display issues
Status: Solution provided with desktop-specific targeting to avoid affecting mobile responsiveness. User can customize the height value to their preference.
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.
1 Like
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.