Catalog

Shopify Discussion
1

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

2 Likes
2

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.