Catalog

[kurage_2025]

Hi everyone!

On my collection page, the spacing between the product image and the product title is inconsistent across different screen sizes.

• On large screens, the image overlaps the text.

• On small screens, there's too much space between the image and the title.

How can I make the spacing consistent on all screen sizes?

Thanks in advance for your help!

URL: https://dboutique.shop/collections/all

[IamAnthony001]

Hello, @kurage_2025 

Here's how to fix the spacing:

1. Go to edit code in your theme editor.

2. Go to the assets folder, find and open: base.css.
Paste the following code at the bottom
.card__information {
margin-top: 12px !important;
position: relative;
z-index: 2;
}
.card__media {
position: relative;
z-index: 1;
}

- Add this to improve the mobile spacing, though it's optional

@media screen and (max-width: 749px) {
.card__information {
margin-top: 10px !important;
}
}

Let me know if this works.