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.
1

Can someone help me with positioning the text close to the images in multirow column. FYI I’m using Dawn Theme.

srtasw_0-1736139273903.png
srtasw_0-1736139273903.png1455×380 96.8 KB

2

Hello @srtasw ,

Could you please provide the URL/ password to your store so that I can check it and provide you with the exact solution?

3

@ZestardTech , Hello

https://www.fifthrebel.com/

4

Can you also help me with setting up the currency symbol instead of Rs. that is being shown for my products.

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!

6

Hi @srtasw

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

.multicolumn-card__info {
    padding-top: 0 !important;
}

image (25).png
image (25).png1392×655 83.3 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

1 Like
7

Hello @srtasw
Go to online store ----> themes ----> actions ----> edit code ----> assets ----> section-multicolumn.css
add this code at the end of the file and save.

.background-none .multicolumn-card__image-wrapper + .multicolumn-card__info {
padding-top: 0rem !important;
}

result

111.png
111.png1104×288 79.2 KB

If this was helpful, hit the like button and accept the solution.
Thanks

1 Like
8

Hi @srtasw
I hope this feedback will be helpful to you.

Please follow the following instructions:

  1. Go to Shopify > Theme > Customize: https://prnt.sc/Lc3MCyXpW8zw
  2. Copy and paste this code on Theme settings > Custom CSS section: https://prnt.sc/pmYP1ElPwdh7
.multicolumn-card__info {
    padding-top: unset !important;
    padding-bottom: 2.5rem;
}

Here is the result.

LizHoang_0-1736150042767.png
LizHoang_0-1736150042767.png1898×719 113 KB

Best,
Liz - Avada Support Team.

1 Like
9

Hello, @srtasw

  1. Go to Online Store
  2. Edit Code
  3. Find theme.css/base.css file
  4. Add the following code in the botto
.background-none .multicolumn-card__image-wrapper+.multicolumn-card__info {
    padding-top: 0rem !important;
}

Thanks!

1 Like
10

Thankyou Everyone.

You guys are awesome.

@ZestardTech @topnewyork @LizHoang @GTLOfficial @DaisyVo