Multicolumn image padding issue

Store Design
, , , ,
1

Hi! Having an issue with spacing:

VicBrew1_1-1732228248606.png
VicBrew1_1-1732228248606.png1434×693 169 KB

I’ve repurposed some code that @Made4uo-Ribe gave me on this thread for something else https://community.shopify.com/c/shopify-design/multicolumn-section-icon-into-a-button/m-p/2848418#M745863

And changed it too:

img {
height: 700px;
margin-left: 85px;
margin-bottom: 0px;
}
.multicolumn-card.content-container .multicolumn-card__info {
margin-bottom: 0px;
transform: translate(0%, 0%);
padding: 0px;
text-align: center;
}
.multicolumn-card__image {
padding: 0px;
margin-bottom: 0px;
}

After changing the img size, there is this ugly spacer which I can’t find the name to in order to shrink it. I have also tried scaleY() and scaleX() on the div and in the “.multicolumn…{}”. No idea what to try next. Any suggestions?

Any help would be greatly appreciated!

Store: https://qtupb6-n1.myshopify.com/

2

Hi @VicBrew1

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
#Slide-template--23817911435631__multicolumn_V9gXPW-1 > div > div.multicolumn-card__image-wrapper.multicolumn-card__image-wrapper--full-width.multicolumn-card-spacing > div {
    padding-bottom: 720px !important;
}

Here is the result: https://prnt.sc/fYtL04hMDM6Y

I hope this helps

Best,

Daisy

1 Like
3

Thank you! That worked perfectly! :grin:

is “.button-primary” the name for the button, so I may push it up as well?

I tried but it didn’t work. So sorry :sweat_smile: :

#Slide-template–23817911435631__multicolumn_V9gXPW-1 > div > div.button–primary > div {
padding-top: 50px !important;
}

4

Hi @VicBrew1

Please add this code more

#shopify-section-template--23817911435631__multicolumn_V9gXPW > div > div > div > a {
    margin-top: -20px !important;
}

Here is the result: https://prnt.sc/5ExlE3Q6u-GY

I hope this helps

Best,

Daisy

1 Like
5

I tried this and it worked!

.button–primary {
padding-top: 0px;
margin-top: 0px;
}

Thank you so much for your help and time!