Ecommerce Shopify WordPress Discussion

How Do I Decrease The Size Of The Video On The Product Page On Desktop Only?

https://charmente.com/products/v-back-flared-jumpsuit The video in this product page is great on mobile, but it is way too big on desktop. Solved! Go to the solution
https://charmente.com/products/v-back-flared-jumpsuit The video in this product page is great on mobile, but it is way too big on desktop. Solved! Go to the solution

December 28, 2023

Go to your Online store > Themes > Edit code > open theme.liquid, add this code below under <head> element <style> #shopify-section-template--21802718724401__5747a917-dc9c-4c2e-b0b5-4d3825306d5d .video-section { max-width: 600px; } </style> Copy - Helpful? Like and Accept a solution. - Donate: Buy coffee ❤️ or Paypal me ❤️ - Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV. - Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots - Enjoy 3 months of Shopify for $1/month. View solution in original post

December 28, 2023

To decrease the size of the video on the product page for desktop only, you can use CSS media queries to apply specific styles based on the screen width. Here's an example using inline styles: 1. Locate the HTML element that contains your video. It might have a class or ID attribute. 2. Add an inline style to set the maximum width of the video on desktop screens. For example: ```html <iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315" frameborder="0" allowfullscreen style="max-width: 100%;" ></iframe> ``` Replace `VIDEO_ID` with the actual video ID. 3. Apply a media query in the `<style>` tag in the `<head>` section of your HTML to target desktop screens and limit the video size: ```html <style> @media (min-width: 768px) { iframe { max-width: 560px; /* Adjust this value based on your preference */ } } </style> ``` This example assumes that screens with a width of 768 pixels or more are considered desktop screens. You can adjust the `min-width` value in the media query to match your specific design breakpoints. Make sure to test these changes on different desktop screen sizes to ensure they meet your design requirements. Adjust the `max-width` values as needed for optimal visual appearance.

December 28, 2023

Go to your Online store > Themes > Edit code > open theme.liquid, add this code below under <head> element <style> #shopify-section-template--21802718724401__5747a917-dc9c-4c2e-b0b5-4d3825306d5d .video-section { max-width: 600px; } </style> Copy - Helpful? Like and Accept a solution. - Donate: Buy coffee ❤️ or Paypal me ❤️ - Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV. - Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots - Enjoy 3 months of Shopify for $1/month.

December 28, 2023

TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) • Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) • Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.