How to change image size/radius and text position of multicolumn section?

Store Design
,

Topic summary

A user needed to modify a multicolumn section on their Shopify store homepage to:

  • Resize images to match other square images on the page
  • Adjust padding/margins between images
  • Add 6.4px corner radius to images
  • Reduce spacing between images and text below

Two solutions were provided involving custom CSS code:

Solution 1: Add CSS in theme.liquid file before </head> tag

Solution 2: Add CSS to theme.css/base.css file targeting specific elements:

  • Removed left/right margins on image wrappers
  • Set column gap to 8px
  • Applied 6.4px border radius to images
  • Reduced top padding on text info section

Outcome: The user confirmed Solution 2 successfully resolved all their requirements. The discussion is resolved with working code provided.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I am trying to change the size of these images , the padding/margins between each image, add 6.4px corner radius to each image, and I would like to move the text underneath higher so there is less spacing between them.

I would like to make the images the same size as the other square images on the page above.

Page: Home Page

Please advise

URL: www.atmos.art

Screenshot 2025-05-29 at 14.00.34.png
Screenshot 2025-05-29 at 14.00.34.png3236×1194 511 KB

2

Hi @atmos-art

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

websensepro_0-1748524933315.png
websensepro_0-1748524933315.png1338×557 410 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

3

Hi @atmos-art ,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@media screen and (min-width: 750px) {
    .background-none .multicolumn-card__image-wrapper {
        margin-left: 0rem !important;
        margin-right: 0rem !important;
    }
.section-template--25002931257667__multicolumn_CykXMW-padding .grid {
    column-gap: 8px !important;
}
}

.section-template--25002931257667__multicolumn_CykXMW-padding img.multicolumn-card__image {
    border-radius: 6.4px !important;
}
.section-template--25002931257667__multicolumn_CykXMW-padding .multicolumn-card__info {
    padding-top: 0px !important;
}

Result:

topnewyork_0-1748526571627.png
topnewyork_0-1748526571627.png1363×584 480 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! :rocket: (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

1 Like
4

Hi this works great, thank you!

5

Hi, thank you for your help. The code provided by Topnewyork seems to have worked for what I am looking for.