I Have Two Multicolumn But I Want To Make Changes To Just One Multicolumn (Post No. 4)

Store Design
, , , , ,
1

Hello,

This is my 4th post on this subject because I am not getting responses from the other posts to help me resolve the issue at hand which is urgently needed at this point.

I have two multi-columns (top and bottom multi-columns as shown below), but I want the image in the top multi-column to be a little closer to the bottom multi-column. Please note that the top multicolumn is clickable such that it takes you to another page and I want it to remain so, and also note that I previously used the code below to adjust the size of the bottom multi-column which I found in this discussion.

.multicolumn-card-spacing {
padding-top: 0.5rem !important;
margin-left: 0.5rem !important;
margin-right: 0rem !important;
}

.multicolumn-card__image-wrapper–half-width {
width: 100% !important;

Charlsy_0-1685354083840.png
Charlsy_0-1685354083840.png998×506 329 KB

My website is: https://dazzlewears.com/

The password to access the website is Charlesudeh1234

Please I really need your help in solving this issue. I am also not knowledgeable in coding, so, I will appreciate your step-by-step direction in solving the issue.

Thanks as I await your help

@Ujjaval

2

Try using this code

.multicolumn-card__image-wrapper–half-width {
width: 50% !important;

}

3

@Charlsy add below css into base.css file

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

Ujjaval_0-1685355575619.png
Ujjaval_0-1685355575619.png1583×785 174 KB

for making clickable first column you need to give href link to redirect on desire page.

4

Hi, @Charlsy

Greetings from the Store Watchers Support Team! Happy to help you today.

  1. Go to online store > theme > edit code > assets > base.css(file) and Paste the below code at the bottom of the file → Save
#shopify-section-template--18957635584303__f4bd2c9c-3b3a-4281-b60e-fbec8bad21b2 .multicolumn{
    margin-top: -40px !important;
}

After applying the above CSS code , it will show like the following screenshot:

Screenshot_7.png
Screenshot_7.png1347×586 594 KB

Let me know If need further assistance

Regards,

Store Watchers Support Team

5

Hi @Charlsy , add below mentioned css code in base.css file

#Slide-template–18957635584303__c2e77ca6-0438-42f1-b41f-414a2ba2a6e8-1 .multicolumn-card__info{ margin-top: -60px !important; }