Multirow Column text position

Store Design
, , , , ,

Topic summary

A user working with Shopify’s Dawn theme needed help positioning text closer to images in a multirow column section. They shared a screenshot showing the spacing issue and provided their store URL for troubleshooting.

Solutions Provided:

Multiple developers offered CSS-based fixes, all targeting the same core issue—reducing padding between images and text:

  • Most solutions involved adding CSS code to reduce or remove padding-top on .multicolumn-card__info
  • Suggested implementation locations varied: base.css, section-multicolumn.css, or the theme’s Custom CSS section in the Customizer
  • One comprehensive solution included additional styling for flexbox alignment and spacing adjustments

Additional Request:

The user also asked about changing the currency symbol from “Rs.” to a different format for product pricing (not addressed in responses).

Outcome:

The issue was resolved. The user thanked all contributors, indicating the CSS solutions successfully fixed the text positioning problem.

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

Hello @srtasw ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
.multicolumn-card.content-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

.media.media--transparent.media--circle {
    display: flex;
    align-items: center;
    justify-content: center;
}
.background-none .multicolumn-card__image-wrapper+.multicolumn-card__info {
    padding-top: 0 !important;
}

slider-component.slider-mobile-gutter {
    margin-bottom: 5rem;
}

Note : Change the spacing values as per your requirements.

Let me know if you need further assistance!