A Shopify store owner seeks help aligning multicolumn images flush with their banner image, as unwanted padding appears on both sides of the columns.
Proposed Solutions:
David_SHT suggests adding CSS code to base.css targeting .multicolumn-list with negative left/right margins of -15px within a media query for minimum width 990px.
PageFly-Henry recommends inserting CSS into base.css that sets .multicolumn-card__image-wrapper.background-none margins to 0 !important.
Current Status:
The original poster tried the first solution but reported no visible change. The issue remains unresolved, with the second CSS approach awaiting testing. Both solutions involve editing the theme’s base.css file through the Shopify code editor.
Hi,
Im looking for help to resize my multi-column images so they are flush with the image banner. There is padding on either side of the two columns and I can’t seem to get them inline even with resizing images. The website URL is parlourcollection.com
Please see photo
Hi @ParlourC
This is David at SalesHunterThemes.
Thank you for your question.
You can try follow this path:
Themes => edit code => asset => base.css
and add this code to bottom of the file base.css
@media(min-width: 990px){
.multicolumn-list{
margin-left: -15px;
margin-right: -15px;
}
}
Thanks for the reply however after trying there was no change.
Hi @ParlourC
This is Henry from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save
.background-none .multicolumn-card__image-wrapper {
margin-left: 0 !important;
margin-right: 0 !important;
}
Hope that my solution works for you.
Best regards,
Henry | PageFly