Dawn: Multicolumn: My image won't resize to 1/3 page width.

[dhelpwithshop]

Hello-

On my website, the images won't resize to 1/3 column width in the multicolumn. It worked on the home page but not on the personalized songs page. This is for the 4 images under "How It Works". Can someone please help?

The images resized here - https://customsonggift.com/

But they didn't resize here - https://customsonggift.com/pages/personalized-song

I need to make the images smaller on the personalized song page.

[DaisyVo]

HI @dhelpwithshop 

In order to fulfill your request, please follow these steps
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above </head>

{% style %}
{% if page.id == 108618449075 %}
.multicolumn-card__image-wrapper > .media > img {
    width: calc(100% /3) !important;
    height: auto !important;
    margin-inline: auto !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
}
{% endif %}
{% endstyle %}

Here is the result: 

I hope this helps

Best,

Daisy

[Abdosamer · Accepted solution]

Hi @dhelpwithshop , to solve this issue go to section-multicolumn.css file and add the following code at the end of it :

.multicolumn-card__image-wrapper.multicolumn-card__image-wrapper--full-width.multicolumn-card-spacing {
    width: 33%;
    margin-left: auto;
    margin-right: auto;
}

Reult:

[Dan-From-Ryviu]

Hi @dhelpwithshop 

You must add this code to Custom CSS of Multicolumn section on that page to do that.

.multicolumn-card__image-wrapper--third-width { width: 33%; margin: 0 auto; }

Or check if your multiplecolumn has option to change image with like this image below