Hello,
I’m trying to make this video wide display, but cannot find any solution:
My current code for the custom liquid is:
Topic summary
Goal: Make a video in a Shopify “custom liquid” section display wider (site: efx.co).
Proposed fix: A reply suggested CSS targeting sections that :has(video), forcing full-width (max-width: 100%, width: 100%) and removing side margins; also targeting .one-whole.column :has(video) with similar rules. This uses the CSS :has() pseudo-class to style parent elements containing a video.
Result: The change made the video extremely large on mobile and oversized on desktop. A screenshot was provided to illustrate the issue.
Current state: No working solution yet. The initial CSS widened the video but broke responsive sizing, leading to overscaling on both mobile and desktop. Further adjustments or constraints are needed to achieve a wide, responsive display.
Attachments: One screenshot showing the oversized video behavior was included.
Hey @rlcotejr ,
Between the style tags, add this
.shopify-section.shopify-section--custom-liquid section.section:has(video) {
max-width: 100% !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.shopify-section.shopify-section--custom-liquid section.section .one-whole.column:has(video) {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
}
When using this, it’s extremely large on the Mobile version of the website.
