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

Multirow size

Solved

Multirow size

Artez
Excursionist
111 5 25

I have a multirow that i like, i would like to make it bigger by 10% approximately, 

is it possible ?

Artez_0-1750580871226.png

https://artez.design/pages/fashion-design

 

Warm regards.

Accepted Solution (1)

Artez
Excursionist
111 5 25

This is an accepted solution.

.multirow__inner.page-width {
max-width: calc(var(--page-width) * 1.1);
margin-left: auto;
margin-right: auto;
padding-left: 0;
padding-right: 0;
/* Remove vertical padding if any */
padding-top: 0;
padding-bottom: 0;
}

.image-with-text {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}

.image-with-text__media {
max-height: none !important;
height: auto !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
/* Optional: make image fill the row vertically */
display: flex;
align-items: stretch;
}

.image-with-text__media img {
height: 100% !important;
object-fit: contain !important; /* or cover, depending on your preference */
}

On base.css

if there is a grey line 

 

.multirow__inner picture {
background: #fff !important;
}

 

View solution in original post

Replies 4 (4)

devcoders
Shopify Partner
1654 190 499

Hello @Artez 

Go to Online Store > Themes > Actions > Edit Code > Assets > base.css
Paste your CSS at the bottom of base.css and click Save

 

.multirow__inner.page-width {
padding: 0;
}

 

devcoders_0-1750587710069.png

 

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!
Artez
Excursionist
111 5 25

look good but now it cut the picture:

Artez_0-1750593906955.png

 

Artez_1-1750593926075.png

 is it possible to open the row a bit up and down so it does not cut the pictures?

https://artez.design/pages/fashion-design

Natasha-Saed
Shopify Partner
467 51 87

Hi,

 

Change the code to 

.multirow__inner.page-width { padding-right: 0; padding-left: 0; }

 

If my solution helped you don't forget to accept it to help others.
===================================================================
And if you really like my support share a cup of coffee with me paypal.me/freemindsint

Artez
Excursionist
111 5 25

This is an accepted solution.

.multirow__inner.page-width {
max-width: calc(var(--page-width) * 1.1);
margin-left: auto;
margin-right: auto;
padding-left: 0;
padding-right: 0;
/* Remove vertical padding if any */
padding-top: 0;
padding-bottom: 0;
}

.image-with-text {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}

.image-with-text__media {
max-height: none !important;
height: auto !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
/* Optional: make image fill the row vertically */
display: flex;
align-items: stretch;
}

.image-with-text__media img {
height: 100% !important;
object-fit: contain !important; /* or cover, depending on your preference */
}

On base.css

if there is a grey line 

 

.multirow__inner picture {
background: #fff !important;
}