Hello!
I have two multicolumn cards that have bullet items on them. On desktop they appear side to side like below:
On mobile view they appear on top of each other, which is what we want.
But you can see there is a gap between the first and second card - we would like to reduce the gap so that the list appears all one list, but only for mobile.
Site link
Preview Product Page Not Currently Live
@Danceddiction please add this css to the very end of your base.css file and check,
Shopify Admin ā Online Store ->Theme ā Edit code ā base.css
@media screen and (max-width:749px){
.multicolumn-card__info{padding-bottom: 0;}
}
Let try to add Custom CSS below:
@media screen and (max-width: 989px) {
.slider-mobile-gutter .multicolumn-list:not(.slider){
row-gap: 0;
}
.multicolumn-card .multicolumn-card__info{
padding-bottom: 0;
}
}
The result will be:
