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
I have a multirow that i like, i would like to make it bigger by 10% approximately,
is it possible ?
https://artez.design/pages/fashion-design
Warm regards.
Solved! Go to the solution
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;
}
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;
}
look good but now it cut the picture:
is it possible to open the row a bit up and down so it does not cut the pictures?
Hi,
Change the code to
.multirow__inner.page-width { padding-right: 0; padding-left: 0; }
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;
}