A user is experiencing an issue where images in a multicolumn section won’t resize to 1/3 page width on their “personalized songs” page, despite working correctly on the homepage. The problem specifically affects four images under a “How It Works” section.
Three CSS solutions were provided:
Solution 1: Add page-specific CSS to theme.liquid file that targets the multicolumn card image wrapper, setting width to calc(100% /3) with centering transforms. This solution uses conditional logic to apply only to the specific page ID.
Solution 2: Modify section-multicolumn.css by adding CSS that sets the image wrapper width to 33% with auto margins for centering.
Solution 3: Add custom CSS directly to the multicolumn section settings using .multicolumn-card__image-wrapper--third-width class, or check if the theme has a built-in image width option in the section settings.
All three approaches target the image container width and centering, with visual examples provided showing the expected result. The discussion remains open pending confirmation from the original poster.
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.
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
{% 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
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:
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
