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

Store Design
, , , ,
1

Hello,

This is my 3 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 fill the width of the multicolumn and for it 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-1685004818928.png
Charlsy_0-1685004818928.png399×162 68.1 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

2

@Charlsy add below css into base.css file (Theme->Edit code->assets->base.css

.multicolumn-list__item:only-child {
    max-width: 100% !important;
}

i think to make the banner option bigger is looking much better to take that column option into trio in one line

Ujjaval_0-1685005550500.png
Ujjaval_0-1685005550500.png1580×801 162 KB

3

To achieve the desired layout where the image in the top multi-column fills the width and is closer to the bottom multi-column, you can modify the CSS as follows:

/* Adjust the width of the top multi-column image */
.top-multicolumn .multicolumn-card__image-wrapper {
  width: 100% !important;
}

/* Add some spacing between the top and bottom multi-columns */
.top-multicolumn {
  margin-bottom: 1rem;
}

.bottom-multicolumn {
  margin-top: 1rem;
}
4

Please add this CSS

.multicolumn-list__item:only-child {
max-width: 100% !important'
}
.multicolumn-card-spacing { 
position: relative; 
}
.multicolumn-card__info {
position: absolute; 
top: 0;
bottom: 0;
width: 100%;
}
5

Thanks for this, it worked and it’s clickable. However, can you please help with a code to close up the gap between the top and bottom multicolumn? The space between these multi-columns is much. I sent you a private message but have yet to get a response