Clickable Multicolumn Image in Refresh Theme without hiding Link Label

[CarGuruGeek98]

I followed the instructions found here

It almost solved my problem but if you look at the last response on the thread by @Mariamendez, it creates a space below the image. 

This space is simply the link label hidden, but it ruins the proportions of the website. 

Please help.

[Moeed]

Hey @CarGuruGeek98 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[CarGuruGeek98]

https://874f23-3c.myshopify.com/

pass: theush

[Moeed]

Hey @CarGuruGeek98 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.page-width.section-template--18316348326117__multicolumn_HCgtHQ-padding.isolate.scroll-trigger.animate--slide-in {
    padding-bottom: 0 !important;
}
.multicolumn-card__info {
    display: none !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[CarGuruGeek98]

It did not work. When you asked for the website, I had just reverted it back to original code. I have updated it to the correct code now. Can you check again?

[Made4uo-Ribe]

Hi @CarGuruGeek98 

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

[CarGuruGeek98]

https://874f23-3c.myshopify.com/

pass: theush

[Made4uo-Ribe]

Thanks for the info, try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.section-template--18316348326117__multicolumn_HCgtHQ-padding .multicolumn-card__info {
    display: none !important;
}

• And save. 
• Result:
• 

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[CarGuruGeek98]

It did not work. The image is no longer clickable once I place that code.

[Made4uo-Ribe · Accepted solution]

Hi @CarGuruGeek98 

Please follow the steps below. This method will only affect the section you are working so you can still use your multi-column for something else. 

1. From Admin page, go to Online Sore > Themes.
2. Choose the theme you want to edit and click the "Customize" button. This should open the theme editor.
3. Click your multi-column section. This should open the section settings.
4. Scroll down and click the "Custom css"
5. Paste the code below

.multicolumn-card__info {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.multicolumn-card.content-container {
    position: relative;
}

[CarGuruGeek98]

That worked perfectly, thank you!

[Made4uo-Ribe]

Nice!