Hi everyone,
Hope someone can help me out. I want to align the carousel to the left so that it fits the overall layout. Somehow there is a border I can not adjust.
https://www.states-gallery.com/
Thank you in advance.
Regards, Haan
Topic summary
A user is trying to left-align a carousel element to match their overall store layout but encounters an unadjustable border preventing proper alignment.
Solutions Provided:
Two community members offered CSS-based fixes:
- Option 1: Add custom CSS to
theme.scss.csstargeting the specific carousel section ID to remove padding and margins - Option 2: Insert CSS code in
theme.liquidbefore the</body>tag to adjust padding on carousel slide elements
Both solutions focus on overriding default padding/margin styles using !important declarations.
Status: The original poster confirmed one solution worked by thanking the contributors, suggesting the alignment issue was resolved.
Hi @Haan
May I suggest to update code these steps:
- Go to Store Online-> theme → edit code
- Assets/theme.scss.css
- Add code below to bottom of file
#shopify-section-401aa483-238d-4fb8-b5e2-dd0335410dae .section-block .carousel-wrapper .carousel__slide-wrapper .carousel-wrap.position-relative .pl-md-5.position-relative {
padding-left: 0!important;
}
#shopify-section-401aa483-238d-4fb8-b5e2-dd0335410dae .carousel-slider {
margin: 0;
}
1 Like
Hello,
please use this given code above the in theme.liquid
layout >> theme.liquid
.carousel__slide .pl-md-5 { padding-left: 0!important; }after that,
1 Like
Thank you!