How to fix multicolumn images cutoff on desktop using Studio Theme?

[vanna19]

I’m using the Studio Theme and I’ve altered the multicolumn.liquid file to make the column images clickable, but this magnified the images within their containers. The changes to the multicolumn.liquid file can be seen here. I added

img.multicolumn-card__image {
  height: auto !important;
}

to the bottom of the base.css file in an attempt to fix this issue, and it worked on the mobile version of the site, but only partially lessened the magnification on the desktop version. How do I make it so the whole images are seen in their columns?

[ExpertRookie]

Hi @vanna19
Thank you for your question.
Please share your store URL, page URL and also password (if your store has one) so we can help you.

[KetanKumar]

@vanna19

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[vanna19]

Hi, thank you!

https://hushiesboutique.com/

pw: egeeno

[BSS-Commerce]

Hi @vanna19

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution.

[vanna19]

https://hushiesboutique.com/

pw: egeeno

[EBOOST]

Hi @vanna19

May I suggest to update code these steps:

1. Go to Store Online-> theme → edit code
2. Assets/section-multicolumn.css
3. Copy code below to bottom of file

.multicolumn-list__item.center .media--adapt, .multicolumn-list__item .media--adapt .multicolumn-card__image {
	max-width: 100%;
}

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

EBOOST

[GemPages]

Hi @vanna19 ,

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:

2. Add my code to end of Assets/section-multicolumn.css file**:**

.multicolumn .multicolumn-list .multicolumn-card__image-wrapper .multicolumn-card__image {
	width: 100% !important;
}

I hope you find the answer helpful.

Kind & Best regards,
GemPages Support Team.

[BSS-Commerce]

Hi @vanna19

• You just need to copy this code:

• Then, paste that code to replace the one I circled in red:

I hope that it will work for you.

[Litos]

Hi @vanna19 ,

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

img.multicolumn-card__image {
    width: 100% !important;
}

Hope it helps!

[Ujjaval]

@vanna19
Put below css into theme.liquid file before closing tag