Reduce Multicolumn Card Size and Maintain Center

Store Design
, , , ,

Topic summary

A user needed to reduce the size of multicolumn cards (containing links and images) to a maximum width of 200px on standard screens and above. While their custom CSS successfully constrained the card size, it caused the cards to become off-center instead of remaining centered on the page.

Solutions offered:

  • Add display: flex; justify-content: center; to the slider component’s multicolumn list item
  • Apply margin: 0 auto; to the .multicolumn-card class in base.css or the section’s custom CSS area

Outcome:
The issue was resolved. The user confirmed that one of the suggested CSS solutions worked perfectly to maintain center alignment while keeping the reduced card dimensions.

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

I am trying to reduce the Multicolumn card size for standard screens and above. My cards have two elements, a link and an image. I’d like to just constrain them both.

I’ve added an html tag into my base.css file

#shopify-section-template--18477261684991__multicolumn_bVTmDY .multicolumn-card {
    max-width: 200px;
    height: auto;
  }

The issue is that it constrains the size great, but it now pulls the card “off-center” Please see below images:

Standard Screen

Danceddiction_0-1727663215701.png
Danceddiction_0-1727663215701.png1212×628 118 KB

Wide Screen

Danceddiction_1-1727663242919.png
Danceddiction_1-1727663242919.png1675×627 122 KB

How can I maintain center for these images?

URL is here
Password: testword

2

@Danceddiction , try this one

slider-component .multicolumn-list__item {
  display: flex;
  justify-content: center;
}
3

Hello @Danceddiction

Please add below css in base.css file or in related sections customize css part

ul.multicolumn-list li .multicolumn-card {
margin: 0 auto;

}

Viralmint_0-1727678115643.png
Viralmint_0-1727678115643.png1678×857 112 KB

1 Like
4

This worked perfectly! Thank you!