Removing white space collection list after hiding text/arrows/buttons - Sense Theme

Store Design
,
1

Hi,

I did some custom code to hide the ugly arrows which appear after the collection list on my homepage.

However it’s left excessive white space which looks off, how do I get rid of this?

Screenshot attached, the arrows are gone but it’s left such a large space it makes my site look unbalanced.

Thank you !

2

@Bloodrainco , Can you kindly share your store url and password?

3

Hello @Bloodrainco
Our team is ready to help you.
Please share your website URL so that we can check and assist you.

4

Hi @Bloodrainco , kindly share your store URL please.

5

www.bloodrain.co.uk

6

HI @Bloodrainco ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

BSSCommerceB2B_0-1726848481078.png
BSSCommerceB2B_0-1726848481078.png400×195 26.3 KB

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

.collection-list.contains-card.contains-card--collection.contains-card--standard.grid.grid--4-col-desktop.grid--2-col-tablet-down.collection-list--4-items {
    column-gap: 10px !important;
}

Step 3: Save and reload home page.

=>> The result:

BSSCommerceB2B_2-1726848526320.png
BSSCommerceB2B_2-1726848526320.png1847×1006 199 KB

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!

7

Hi there, thanks for your response.

The arrow points towards the gap between the column, I meant the space underneath them, which is excessive. Mobile view attached. I hid the buttons and arrows but it seems the space that they did take up is still being accounted for. Hope that makes sense

1000002749.png
1000002749.png1080×2400 311 KB

8

HI my friend, @Bloodrainco ,

I’ve checked your website, and it seems like you’re trying to hide the content of card__content. However, even after hiding the content, there is still white space left. Try using this code for the mobile version. I think the display will be more appropriate, and the current issue will be resolved:

in base.css:

@media only screen and (max-width: 768px) {
  .collection-list__item.grid__item.scroll-trigger.animate--slide-in .card__content {
    display: none !important;
  }
}

The result will be:

BSSCommerceB2B_0-1726914230703.png
BSSCommerceB2B_0-1726914230703.png565×928 289 KB

Hope it helps!

9

Hi, that removed the white space, but I still need the collection photos to be clickable - that seems to have taken that away unfortunately :disappointed_face:

1 Like
10

Hi @Bloodrainco ,

If you need the collection photos to be clickable, you can try this code to replace previous my comment by this:

@media only screen and (max-width: 768px) {
  .collection-list__item.grid__item.scroll-trigger.animate--slide-in .card__content {
    position: absolute !important;
  }
}

The result the white space was removed and still clickable the collections photo.

BSSCommerceB2B_0-1726965555640.png
BSSCommerceB2B_0-1726965555640.png535×917 252 KB

I hope this instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!