How can I arrange multicolumn images on dawn theme efficiently?

Shopify Discussion
1

Hi All,

Does anyone know how to achieve this in multicolumn images on dawn theme? Equal columns and utilizing the spaces from left to right?

jbvergara_0-1669633922035.png
jbvergara_0-1669633922035.png1920×518 232 KB

Site: https://sparkt-outdoor-gear.myshopify.com/

Pass: 12345

2

@jbvergara ,

Please check the screenshot I have sent.

oscprofessional_0-1669636057787.png
oscprofessional_0-1669636057787.png1901×996 323 KB

remove the text and heading. add the images in multi-column then adjust the space with CSS.

1 Like
3

Hi,

I would be needing help on how to adjust the CSS for that one, you have script to do that?

4

@jbvergara ,

.page-width.section-template--16831166808355__f677c442-839a-4401-b5f3-12e6df3adfe3-padding.isolate {
    padding: 0;
    max-width: 100%;
    margin: 0;
}
ul#Slider-template--16831166808355__f677c442-839a-4401-b5f3-12e6df3adfe3 {
    column-gap: unset;
}
ul#Slider-template--16831166808355__f677c442-839a-4401-b5f3-12e6df3adfe3 li {
    max-width: initial;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

1 Like
5

Awesome that worked! Thanks.

Is there a way to make it small vertically?

6

@jbvergara

Please like and accept the solution.

1 Like
7

@jbvergara ,

img.multicolumn-card__image {
    max-height: 610px;
}

.media--portrait {
    padding-bottom: 102%;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

1 Like
8

You are amazing! Thanks!

9

I’m using the Refresh theme, which I’m told is based off of Dawn. However, I do not have a theme.scss.liquid. Is there a way to do this with the Refresh theme?