A user seeks help making a Custom Liquid section display at full width on their Shopify store. The section currently has padding that prevents it from spanning the entire viewport.
Solutions Provided:
Multiple community members offered CSS-based fixes:
Primary solution: Add custom CSS targeting the specific section ID to remove padding:
Implementation: Add the code to theme.css or base.css via the theme code editor (Online Store → Themes → Edit Code)
Issue Encountered:
The user initially reported that applying the fix made all templates full width, not just the intended section. After clarification about proper code placement and targeting the specific section ID, the solution worked correctly.
Status: Resolved. The user confirmed the fix worked after applying the section-specific CSS code.
Summarized with AI on November 4.
AI used: claude-sonnet-4-5-20250929.
/* New CSS to make videos fill the entire container /
.slide-video-poster {
width: 100%;
height: 100%;
background-size: cover; / Ensure background image covers the entire container /
background-position: center; / Center the background image /
display: block; / Ensure cover is displayed */
}
video {
width: 100%;
height: 100%; /* Adjust video height /
object-fit: cover; / Make video keep its ratio and fill the entire container /
display: none; / Initially hide video */
}
/* Show video in active slide */
.swiper-slide-active video {
display: block;
}
If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!
