Remove space between pictures in collections section

Topic summary

Main Issue:
Users want to remove spacing between images in Shopify collection sections to create a seamless, edge-to-edge gallery layout.

Primary Solutions Provided:

  • CSS code injection via theme.liquid file (before </body> tag)
  • Key CSS properties used:
    • column-gap: 0 !important for collection grids
    • max-width: 100vw and margin: 0 for full-width display
    • Custom width values (e.g., width: 298px) for precise image sizing

Common Challenges:

  • Initial code attempts didn’t always work due to theme-specific CSS selectors
  • Right-side spacing persisted even after applying padding/margin resets
  • Required iterative adjustments to target correct CSS classes (.collection-list-wrapper, .product-grid-container)

Resolution:
Multiple users successfully implemented solutions with customized CSS values. One user adjusted provided code from default to 376px width, achieving desired seamless appearance.

Additional Request:
Thread concludes with request for full-width background video implementation under header (separate from original spacing issue).

Status: Resolved for original posters through custom CSS modifications.

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

I changed your code to 376px and it worked like wonders! Thank you so so much for your patience and your help!!!

Would you be able to also guide me how to set a full screen (width) background video that would play on loop (no sound) but would be under the header?

Just as below

Instead i have this under header with play button: