Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Multicolumn image padding issue

Solved

Multicolumn image padding issue

VicBrew1
Tourist
35 1 8

Hi! Having an issue with spacing:

 

VicBrew1_1-1732228248606.png

 

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#M7...

 

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/

 

 

 

Accepted Solution (1)

DaisyVo
Shopify Partner
810 103 118

This is an accepted solution.

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
Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

View solution in original post

Replies 4 (4)

DaisyVo
Shopify Partner
810 103 118

This is an accepted solution.

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
Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
VicBrew1
Tourist
35 1 8

Thank you! That worked perfectly! 😁 

 

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 😅 :

 

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

 

DaisyVo
Shopify Partner
810 103 118

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

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
VicBrew1
Tourist
35 1 8

I tried this and it worked! 

 

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

 

Thank you so much for your help and time!