Taste theme home page video is huge, variehook.com

Store Design

Topic summary

A user is experiencing an issue with an oversized homepage video in the Taste theme, particularly noticeable on Android phones. Despite attempting code modifications suggested for other themes, the problem persists.

Troubleshooting attempts:

  • PageFly support provided CSS code to adjust video padding (40% bottom-padding) via the base.css file
  • User reported minimal improvement (~5% reduction) even when adjusting padding to 25%
  • User temporarily removed the video, then restored it for further troubleshooting

Latest solution:
PageFly support suggested injecting custom CSS into theme.liquid (before tag) targeting the specific video section with 45% bottom-padding. When this didn’t work, they provided an updated code snippet with 40% padding.

Status: The issue remains unresolved. Multiple code iterations have been tested without successfully fixing the video size problem on mobile devices.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

I tried fiddling with the code as suggested for other themes, but it didn’t fix the issue. Video looks the appropriate size on android phone.

2

Hi @variehook

This is Victor from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css.

Step 3: Paste the below code at bottom of the file → Save

.color-background-1.gradient deferred-media.video-section__media.deferred-media.no-js-hidden.gradient.global-media-settings {

padding-bottom: 40% !important;

}

Hope that my solution works for you.

Best regards,

Victor | PageFly

3

Maybe reduced it 5 percent. I tried changing the padding to 25% and that didn’t help either.

4

Hi @variehook

Sorry for missing your message
I checked your issue again and noticed that you seem to have deleted the video.
In case you need anything else, don’t hesitate to let us know.
Thank you so much.

5

I put the video on the home page back up…sorry about that. Appreciate you looking at this again.

1 Like
6

@variehook

You can try again with this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code code in tag → save.

PageFlyVictor_0-1671200188741.png
PageFlyVictor_0-1671200188741.png1365×651 47.6 KB

.video-section.isolate.page-width.section-template–16618341138664__5c96a783-4875-4a19-a1b7-9b444af21acd-padding deferred-media.video-section__media.deferred-media.no-js-hidden.gradient.global-media-settings {
padding-bottom: 45% !important;
}

Hope that my solution works for you.

Best regards,

Victor | PageFly

7

No change. Thanks for trying.

8

Hi @variehook

Sorry, you can try again with this code:

.video-section__media.deferred-media {
padding-bottom: 40% !important;
}