How to make featured collection image full width in Dawn theme

Technical Q&A
, ,

Topic summary

Main issue: The featured collection in the Dawn theme wasn’t truly full-width on desktop, causing reduced left padding and poor alignment versus other sections. The user also uses a desktop carousel and “adapt to image ratio,” and wants maximum product image width without breaking left alignment.

Progress: After sharing the store URL and password, the helper asked to enable full-width across featured collections to compare alignment. Visuals (images) were used to show misalignment and excessive gap.

Proposed fix: Add custom CSS in Online Store → Theme → Edit code → Assets → component-slider.css.

  • Under @media (min-width: 990px), adjust slider padding for desktop: slider-component:not(.page-width-desktop) { padding: 0 5rem; }.
  • For full-width sliders, remove the extra left margin on the first slide: .slider-component-full-width .slider–desktop .slider__slide:first-child { margin-left: 0; }.

Notes: Images are central to understanding the gap and alignment changes. “Featured collection” is a Shopify section showcasing products; “full width” spans the viewport; the “slider-component” is the carousel element.

Status: User acknowledged with thanks after code was provided; final alignment/full-width outcome not explicitly confirmed, so resolution appears pending.

Summarized with AI on December 13. AI used: gpt-5.
1

NOT1_0-1733143307223.png

When i use this the products left padding decreases. The left alignment becomes very bad for the other sections I have desktop carousel enabled. So I want to max the product image width but also keep the left alignment same as now. *I am using adapt to image ratio

1 Like
2

@NOT1
Sorry you are facing this issue,
It would be my pleasure to help you.
Please share your site URL,
I will check out the issue and provide you with a solution here.

1 Like
3

Hey thanks for the reply. You can see the New Arrivals section for an example. Here is my URL: https://thenewbeast.myshopify.com/

1 Like
4

@NOT1 thanks for URL but sorry your store passwords project

1 Like
5

Oh sorry its 000

1 Like
6

@NOT1 its ok

do you want like this?

KetanKumar_0-1733154283292.png
KetanKumar_0-1733154283292.png1920Ă—922 320 KB

1 Like
7

NOT1_0-1733154595649.png
NOT1_0-1733154595649.png1728Ă—727 197 KB

No i was talking about this *featured collection

1 Like
8

@NOT1 thanks for clear are you checking theme section if any option full or narrow section width?

1 Like
9

I have full width option on in the editor. But the problem is its not aligned with the other sections like you can see its at left part too much from the title

1 Like
10

@NOT1 can you please enable all section full width after let me know

1 Like
11

Done I enabled all featured collections sections width to full. I just left the Shirt section of featured collection left so that you can understand the diffrence

1 Like
12

@NOT1 can you please confirm this

KetanKumar_0-1733157047373.png
KetanKumar_0-1733157047373.png1920Ă—922 222 KB

1 Like
13

Yes but now the gap is too much :disappointed_face:

1 Like
14

@NOT1 now it ok for you?

KetanKumar_0-1733164500410.png
KetanKumar_0-1733164500410.png1920Ă—922 249 KB

1 Like
15

No its not full width now :cry:

1 Like
16

@NOT1 yes please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/component-slider.css ->paste below code at the bottom of the file.
@media (min-width: 990px){
.collection slider-component:not(.page-width-desktop) {padding: 0px 5rem;}
.slider-component-full-width .slider--desktop .slider__slide:first-child {margin-left: 0;}
}
1 Like
17

Thanks

1 Like
18

@NOT1 its my pleasure to help us.