How do i get fill the space on my home page?

Store Design
, , , ,

Topic summary

A Shopify store owner seeks to eliminate black gaps on their homepage collection grid and overlay text directly onto images, referencing another site’s design as inspiration.

Solution Provided:
A community member (Dan-From-Ryviu) supplied CSS code to:

  • Remove spacing between collection items
  • Make items fill 50% width each
  • Position text as an overlay using absolute positioning

Implementation Progress:

  • Initial code successfully removed gaps on desktop
  • Mobile view required additional CSS adjustments (removing padding from .collection-list)
  • Text overlay needed !important flag to work properly

Current Status:
The layout issues are resolved. The user has one remaining question about changing the overlay text color from white to black for the ‘For Her’ and ‘For Him’ labels. The discussion remains open awaiting a response on this final styling adjustment.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

I want to fill the space on our website so there’s no black gaps (picture attached)

I would also like to stack the text onto the photo.

Website URL: https://1rzd08-i0.myshopify.com/

Password: riatri

A reference I’d like our website to look like is linked here → https://www.sau-lee.com/en-hk?adg_id=148072128883&cmp_id=20035256817&device=c&gad_source=1&gclid=CjwKCAiAm-67BhBlEiwAEVftNgVmPuDy68FS1H3P9ufSuznU2cB98Ohk4jWd9ggVznwXtNEwhQ3EZRoCwS4QAvD_BwE&kwd=sau%20lee

1.png
1.png767×435 257 KB

1 Like
2

Hey @lontessa

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

Hi @lontessa , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

4

Hi @lontessa

Could you please share your store URL so that we can check it further?

Looking forward to hearing from you soon. Thank you!

5

Hello there @lontessa Like others have said here, you’d need to share your store URL link for the issue to properly be assessed and for an appropriate code fix to be given to you. If you do not want to make your link public for whatever reason, then you should could share it privately as well.

6

Hi @lontessa

You can add this code to Custom CSS of that Collection list section and check again.

.collection-list-wrapper {
max-width: 100%;
padding: 0;
}
.collection-list {
column-gap: 0;
row-gap: 0;
}
.collection-list__item {
width: 50%;
max-width: 50%;
}
1 Like
7

Amazing thank you! Do you perhaps know how I could make the text part of the box rather than below it?

8

Hi, please try to add this more code and check again

.card--standard>.card__content {
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    right: 0;
    bottom: 0;
}
1 Like
9

it worked on desktop, thank you so much but for some reason when i switch to mobile view, it still has spaces on the sides of the picture.

10

Website URL: https://1rzd08-i0.myshopify.com/

Password: riatri

11

Please update code

.collection-list-wrapper {
max-width: 100%;
padding: 0;
}
.collection-list {
column-gap: 0;
row-gap: 0;
padding: 0
}
.collection-list__item {
width: 50%;
max-width: 50%;
}
1 Like
12

Yes, that works perfectly, thank you so much!

1 Like
13

Nothing happens when I add this to the other code :disappointed_face:

14

It was my pleasure!

Best,

Dan - Ryviu Support Team.

1 Like
15

Try to update it to this code

.card__content {
    padding: 0;
    position: absolute !important;
    top: 0;
    left: 0;
    z-index: 9;
    right: 0;
    bottom: 0;
}
16

That did it! Thank you and I’m so sorry but hopefully this is my last question (I know nothing about coding!) - The ‘For Her’, ‘For Him’ font is white, do you know how I can change it to black?