A Shopify store owner needed help aligning elements in a multicolumn section: text should be left-aligned while images should be centered.
Initial Problem:
Troubleshooting Process:
.multicolumn-card__image-wrapper styling failed due to incorrect code placementWorking Solution:
The issue was resolved with a simple CSS snippet:
.multicolumn-card__info { text-align: left; }
Status: Resolved. The user confirmed the final solution worked successfully.
Hey there,
Hope everyone is doing well. I have this multicolumn section where I want the text to be on the left and the images to go in the centre. Can I do it with a custom CSS?
Will be very happy if someone helps. I will attach a photo so you can see more closely.
Thanks in advance!
Best,
KRAFTIO
Hi @Kraftio_BG ,
Can you please share the store URL? I will try to inspect it and provide you with the code. If I’m not able to do that, then I’ll need the collab code.
Sure, @AiTrillion. Thanks for reaching out.
URL: https://kraftio.bg/
Oh, sorry @AiTrillion, i am still editing it.
Otherwise it is on the product page.
When you scroll down you will see only the text without the images, but i will upload the images as well.
Unfortunately, pasted this code on my base.css, but nothing happened. Don’t know if this is the solution.. :((
It didn’t happen because you pasted it at the bottom of the page. Paste it in the middle, like above the .body tag. Alternatively, you can go to Shopify Admin → Online Store → Themes → Customize, click on the Settings icon, scroll to the bottom to find Custom CSS, paste it there, and it should work.
Additonally, Can you please confirm if you have checked my image and that the solution you want is similar to it?
Unfortunately it is still not working. I’ve tried everything. However, the image you have sent is exactly what i would want.
Hi there,
Yes, you can achieve that with a bit of custom CSS. In your case, since you want the text aligned left and the images centered in each column, you can target the elements inside the multicolumn section separately.
Here’s an example you can try. Adjust the selectors to match your theme’s structure:
/* Align text content to the left */
.multicolumn-card__content {
text-align: left;
}
/* Center the image inside its container */
.multicolumn-card__image-wrapper {
display: flex;
justify-content: center;
}
How to add it:
In your Shopify admin, go to Online Store → Themes → Customize.
Click the Theme settings or the section with your multicolumn.
If your theme supports Custom CSS, paste the code there. If not, go to Edit code → Assets → base.css (or theme.css) and paste it at the bottom.
If your theme uses different class names, you can right-click your section, inspect the code in your browser, and replace .multicolumn-card__content and .multicolumn-card__image-wrapper with the correct ones.
This will keep the text neatly aligned to the left while maintaining the images perfectly centered in their columns.
Please add this code to Custom CSS of that section.
.multicolumn-card__info { text-align: left; }
Great, @Dan-From-Ryviu !!
It worked pretty well. Thanks to those who tried as well. I appreciate it.
Have an amazing day!
You are very welcome!