How can I resize multicolumn mobile images for better view?

[Sharyn2]

Hi there, I’m have a multicolumn section on my desktop which is perfect size but when I change to mobile view they are way too big. I’d like to change the single column to 3 column across on mobile view?

[Moeed]

Hey @Sharyn2
Kindly share your Store URL and Password if enabled

[Made4uo-Ribe]

Hi @Sharyn2 ,

Would you mind to share your URL website with password if its protected? Thanks!

[Sharyn2]

https://www.tripleonedesigns.com.au/

Testing1234

[Sharyn2]

This is how I’d like it to look

[Made4uo-Ribe]

Hi @Sharyn2 ,

Thank you for the information.

Try this.

1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
3. In the “Assets” folder, click on “base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
4. And Save.

@media only screen and (max-width: 749px){
li.multicolumn-list__item.grid__item.center {
    padding: 20px;
    margin-left: 5px;
}
.grid--1-col .grid__item {
    max-width: 32%;
}
}

Result:

I hope it help.

[Sharyn2]

Thank you I tried this and this is the result

The images are now very small and only 2 across, can they be bigger to fit the screen across 3 images?