How to reduce the margins of the sliders

Shopify Discussion

Topic summary

A user seeks to reduce the left and right margins of homepage sliders so they align with the website’s borders, rather than stretching full-width across the screen.

Attempted Solutions:

  • One responder suggested adding custom CSS to adjust margins using .slider-class with specific pixel values in the theme’s CSS file (styles.css or theme.css)
  • Another recommended inserting code into the theme.liquid file via Online Store → Theme → Edit code

Current Status:

  • The original poster tried the CSS approach but reported it did not work
  • A second user has encountered the same issue and is also seeking a working solution
  • The discussion remains unresolved with no confirmed fix yet identified
Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
2

Hi,

CSS file. It’s often named styles.css or theme.css.

Add Custom CSS

.slider-class {
    margin-left: 20px; /* Adjust the left margin as needed */
    margin-right: 20px; /* Adjust the right margin as needed */
}

Replace .slider-class with the actual class or ID

Save->preview and publish