Hello!
I would like to know how to code or make this featured collection carousel (the first product) start from the side of the page. So it is in full width of the page.
Topic summary
A user working with Shopify’s Refresh theme wanted to adjust a featured collection carousel so the first product card starts flush with the page’s left edge, rather than having a gap.
Initial attempts:
- First suggestion involved removing the
page-widthclass fromcollections-list.liquid, but this affected the entire collection layout rather than solving the carousel alignment issue.
Final solution:
- Adding custom CSS to the
base.cssfile successfully resolved the problem:
.slider--desktop .slider__slide:first-child {
margin-left: 0px !important;
}
Outcome:
The CSS snippet removed the left margin from the first carousel slide, aligning it with the page edge as desired. The issue was marked as resolved.
Hi @ARSystems .
goto the online store and edit the code. and search the collections-list.liquid file and open the file. Remove the page-width class and save.
Like This
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
I mean it worked on the collections, but my problem is not that. I want the product cards that are shown in the image (they are a featured collection section on the refresh theme and the carousel mode is enabled) to start showing the first product at the side of the page. Not with a gap at the left side.
Hi @ARSystems .
Follow These steps,
Go to the online store theme and go to base.css file paste the code mentiond below.
section#shopify-section-template--19556170563895__b9f8c0dc-b1fc-4bf9-9400-6e90f07b49e8 .page-width {
max-width: 100%;
}
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Went to the base.css file. Pasted the code at the bottom of the CSS file. Unfortunately nothing changed.
Please Share your Store URL And Password.
arprosystems.com password - ialdea
Add this CSS.
Your base.css file.
.slider--desktop .slider__slide:first-child {
margin-left: 0px !important;
}
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Thank you! This worked. Appreciate the effort 
1 Like