Redesign Multirow section

Redesign Multirow section

avk9641
Excursionist
15 0 4

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.

 

Screenshot 2024-07-26 at 12.33.34 PM.pngScreenshot 2024-07-26 at 12.36.02 PM.png

Replies 2 (2)

oscprofessional
Shopify Partner
16343 2438 3177

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

Hire us | Pass Core Web Vital | B2B Wholesale Experts | Claim Your Free Website Review |
Connect with Us: WhatsApp | Skype: oscprofessionals-87 | Email: pallavi@oscprofessionals.com |
Custom Shopify SolutionsPrivate Apps, Theme Customization & SEO | Digital Marketing |
OSCP Apps: Discount Suite | Wholesale App | Bundle & Upsell | Shipping Discount | and more...
avk9641
Excursionist
15 0 4

this code did not work. I was able to solve items 1 and 3, but there is still som visible space between the rows.Screenshot 2024-07-29 at 1.59.23 PM.png