Image vs text gap

Store Design
,
1

Hi, im trying to reduce the gap between text card and the image (marked in red) in mobile version for all the images. The standard theme settings dont allow me to do that. Could someone help me out with the CSS Code? Thanks. Here is the link https://uiriims5fvm5xg27-77830390093.shopifypreview.com

image
image719×982 122 KB

2

Hey @JustinasR ,

Try adding the following CSS to your theme’s base.css or theme.css file:

@media screen and (max-width: 749px) {
.image-with-text__content {
padding-bottom: 0 !important;
}

.image-with-text__media {
margin-top: 0 !important;
}
}

If the gap is still there also try this:

@media screen and (max-width: 749px) {
.image-with-text__grid {
gap: 0 !important;
row-gap: 0 !important;
}
}

I hope this help you
Thank You !

3

Hey @JustinasR

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
@media screen and (max-width: 767px) {
.collection-featured-item .collection-featured-item-info {
    padding-bottom: 0 !important;
}
.collection-featured-item .collection-featured-item-image {
    margin-top: 0 !important;
}
}
</style>

RESULT:

image
image348×536 53.5 KB

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed