Custom Multicolumn layout - responsive

[back2natureheal]

I have a custom multicolumn layout here with 3 images, I need these images to fill the full width of the section and also be responsive:

This is what it looks like now:

This is what it should look like:

I also need there to be a scroll option on mobile so you can scroll through the images.

my store: https://92f949-38.myshopify.com/

[Moeed]

Hey @back2natureheal 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.custom-multicolumn-boxes {
    justify-content: space-between !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[namphan]

Hi @back2natureheal,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.custom-multicolumn-boxes {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-left: 1.5rem;
    -webkit-overflow-scrolling: touch;
}

[back2natureheal]

Hi there,

THanks so much for your reply. The scroll works

but

now it is scrolling on desktop, I need the 3 boxes to be fullscreen on desktop, and scroll only on mobile:

https://92f949-38.myshopify.com/

[namphan]

Hi @back2natureheal,

Please add code:

@media screen and (min-width: 750px) {
.custom-multicolumn__item {
    width: calc(100% / 3);
    max-width: calc(100% / 3);
}
.custom-multicolumn__item img {
    width: 100%;
}
}