I want to add overlay color

Store Design

Topic summary

A user is attempting to add an overlay color to a video using CSS linear-gradient but encounters a layout issue—the overlay doesn’t cover the complete video, leaving a gap on the right side.

Proposed Solution:
A PageFly support representative provides a two-step fix:

  • Add custom CSS code to the theme.liquid file
  • Insert the code above the tag by navigating to: Online Stores > Themes > Actions > Edit code

Status: The discussion appears resolved with a specific technical solution provided, though user confirmation of success is not included in the thread.

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

Hey I added Background:linear-gradient( 270.01deg, rgba(255, 255, 255, 0.08) 41.25%, rgba(255, 255, 255, 0.8) 87.95% );

color is added but not on complete video a gap on right and left side can you plz fix that issue.

Store link :expert-wc.myshopify.com

Password:9999

scrnli_5_28_2024_4-57-10 PM.png
scrnli_5_28_2024_4-57-10 PM.png1340×536 579 KB

2

Hi @Josh_01

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the 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

Hope this can help you solve the issue

Best regards,

Richard | PageFly