Promotion image

Re: White Margin Around Video

24 0 2

I have this video on my website (https://b7ff16-2.myshopify.com/) with the custom liquid below:

<video poster="" loop="" muted="" playsinline="" nocontrols="" autoplay="" src="https://cdn.shopify.com/videos/c/o/v/03b1a57eb2d4468db58c243f5c5683d1.mp4" width="100%"></video>

It looks good on the desktop but doesn't fit well on the mobile. Can anyone help?
I will appreciate any help you can provide.

Accepted Solutions (2)

5011 1120 1805

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
div#shopify-section-template--20792368463895__custom_liquid_f4c4CA .custom-liquid--root {
    padding: 0 !important;
}
</style>

Hope this can help you solve the issue

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!

➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)

All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

11933 2340 2515

Add this code to your theme.liquid file, after <head>

<style>
@media (max-width: 749px) {
#shopify-section-template--20792368463895__custom_liquid_f4c4CA .custom-liquid--root {
padding-left: 0px;
padding-right: 0px;
}
}
</style>

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 5 (5)

5011 1120 1805

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
div#shopify-section-template--20792368463895__custom_liquid_f4c4CA .custom-liquid--root {
    padding: 0 !important;
}
</style>

Hope this can help you solve the issue

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!

➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)

All features are available from Free plan. Live Chat Support is available 24/7.

24 0 2

It works. Thank you so much!

11933 2340 2515

Add this code to your theme.liquid file, after <head>

<style>
@media (max-width: 749px) {
#shopify-section-template--20792368463895__custom_liquid_f4c4CA .custom-liquid--root {
padding-left: 0px;
padding-right: 0px;
}
}
</style>

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

24 0 2

Thank you😁

3 0 0

To make the video fit better on mobile devices, you can use CSS to control its size and aspect ratio. You can try adding a CSS media query to adjust the video size specifically for mobile screens. Here's how you can do it:

<style>
/* CSS for desktop */
@media (min-width: 768px) {
/* Adjust the video width and height for desktop */
video {
width: 100%;
height: auto;
}
}

/* CSS for mobile */
@media (max-width: 767px) {
/* Adjust the video width and height for mobile */
video {
width: 100%;
height: auto;
}
}
</style>

<video poster="" loop="" muted="" playsinline="" nocontrols="" autoplay=""src="https://cdn.shopify.com/videos/c/o/v/03b1a57eb2d4468db58c243f5c5683d1.mp4" width="100%"></video>

Community Blog Articles

May '25.jpg

Celebrating our Members of May '25

June brought summer energy to our community. Members jumped in with solutions, clicked ...

By JasonH Jun 5, 2025

Automate store operations with Shopify Academy & Coding with Jan

Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...

By Jacqui May 7, 2025

April 25.jpg

Highlighting our Members of April '25

Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...

By JasonH May 2, 2025