Broken video look on mobile

[gabbym0062]

Hi all,

I have been trying to debug a problem with the video with text section on this page for my company: https://www.tinahealthcare.com/pages/how-to-use-tina

On my computer, the mobile version looks fine and is how it's supposed to look like:

However, when I look on my iPhone, there is a big gap/padding around the video:

 

I've removed all padding around the video that I can, but it's still not working on my iPhone specifically. Can anyone help?

Best,

Gabrielle

[luccyforresult]

The issue of excessive padding or gaps around the video on iPhones could be caused by a few factors, including CSS settings, viewport scaling, or default browser behaviors on iOS. Here’s how you can fix it:

1. Override Unwanted Padding/Margins with CSS

Add the following CSS to your theme’s custom CSS section or stylesheet:

@media screen and (max-width: 768px) {
.your-video-container {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
}

.your-video-container iframe,
.your-video-container video {
width: 100% !important;
height: auto !important;
display: block !important;
}
}

Replace .your-video-container with the actual class of your video section (inspect it in Developer Tools).

This ensures no extra padding or margins are applied and that the video scales correctly on mobile.

2. Check if the Page Builder Adds Extra Padding

If you're using a Shopify page builder (like PageFly, GemPages, etc.), check its settings for any default padding/margins that might be applied to mobile layouts.

3. Viewport Meta Tag Adjustments (If Needed)

If the issue persists, ensure your <meta viewport> tag in your HTML is correctly set:

<meta name="viewport" content="width=device-width, initial-scale=1">

This prevents iPhones from automatically scaling content incorrectly.

4. Clear Cache & Test on a Real iPhone

After applying the fixes:

Clear the browser cache and refresh the page.

If using a site builder, republish the page.

Test it on 2/3 iPhones to ensure consistency.