DAWN THEME : Homepage Collection Section [FULL WIDTH]

Store Design
1

Hi good day guys,

https://malayanwolfpack.myshopify.com/

The above is the early mockup for my website homepage. As you would notice , the collection section has 3 cards with white gap on left and right. Also rather than having each collection title appearing on a grey box at the bottom, I would want it to overlay on a full height image at right at it’s current placement.

You may refer to this website below as a reference for what I would like to achieve.

https://www.eightyfiveclo.com/

Thank you.

2

@malayanwolfpack
add below css into base.css file (Online store->theme->Edit code->Assets->base.css)

@media screen and (min-width: 750px)
{
.grid {
    column-gap: 0px !important;
}
.page-width {
    max-width: 100% !important;
}
.page-width {
    padding: 0px !important;
}
header.header.header--top-center.header--mobile-center.page-width.header--has-menu {
    width: 60% !important;
}
}

Ujjaval_0-1679904238435.png
Ujjaval_0-1679904238435.png1574×783 219 KB

3

Hi @malayanwolfpack

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Base.css

@media(min-width: 1024px){
.page-width {
    max-width: 100% !important;
    padding: 0 !important;
}
.grid {
    column-gap: 0 !important;
}
}

Hope you find my answer helpful!

Best regards,

Victor | PageFly

4

Hi @malayanwolfpack ,

Glad to support you today.

You can check out my suggestion below to get your concern resolved:

  1. Go to Edit code on Online Store:

GemPages_0-1679976166806.png
GemPages_0-1679976166806.png400×163 25.3 KB

  1. add my code above the tag on Theme.liquid:

Hope you find my answer helpful!

Kind & Best regards,
GemPages Support Team.