Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
Hi,
I am trying to change my multi row section to look like the example attached.
How do I
1) extend the images to the left border
2) ensure there is no gap between the rows
3) raise the caption text higher up
Thanks.
Hello @avk9641
It is some CSS issue please apply the below CSS
.multi-row-section {
padding-left: 0;
margin-left: 0;
}
.multi-row-section .row {
display: flex;
margin: 0;
padding: 0;
}
.multi-row-section .row .image-container {
flex: 1;
margin: 0;
}
.multi-row-section .row .image-container img {
width: 100%;
}
.multi-row-section .caption-container {
position: relative;
top: -10px; /* Adjust as needed */
margin-bottom: 0;
}
I hope its useful for you if any issues please connect with us I will help resolve this issue
thanks
this code did not work. I was able to solve items 1 and 3, but there is still som visible space between the rows.