Removing empty space between collections

[Linealy87]

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

@media (max-width:767px){
.collection-list__item .card__information {
    display: none;
}
}

[Sweans]

Hi @Linealy87 ,

The white space is not blank; it displays the collection name. To make the collection name visible, you can change the text color. Please follow the steps below.

1.In your Shopify admin, navigate to “Online Store” under Sales Channels. Click the three dots next to the theme you wish to edit, then select “Edit Code”.

2. Next you can find main.css/theme.css/base.css/style.css(it will be based on your theme file)
   Add the below code to your CSS file:

.slider-mobile-gutter .card__content a {
color: #000;
}

If you wish to hide the white space please use the CSS below:

.slider-mobile-gutter .card__content {
display: none;
}

If you need further assistance, feel free to reach out!

I hope this helps! If it does, please like it and mark it as a solution!

Regards,

Sweans

[Sweans]

HI @Linealy87 ,

If the above solution needs to be fixed. Please share your store link with us. So we can help you with detailed solutions.

Regards,
Sweans

[Rahul_dhiman]

Hello @Linealy87
Go to online store ---------> themes --------------> actions ------> edit code------->base.css
add this code at the end of the file

@media screen and (max-width: 749px) {
.grid--2-col-tablet-down .grid__item {
height: 207px;
}
}

and the result will be

If this was helpful, hit the like button and mark the job as completed.
Thanks

[Made4uo-Ribe]

Hi @Linealy87

Is this only on mobile screen? Or include Dekstop?

I include both screen on this code.

1. From you Admin page, go to Online Store > Themes
2. Select the theme you want to edit
3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
4. Then place the code below at the very bottom of the file.

.collection-list:not(.slider) .card__information {
    display: none;
}

• And Save.
• Result:
• 

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[BSS-TekLabs]

• Here is the solution for you @Linealy87
• Please follow these steps:

• Then find the base.css file.
• Then add the following code at the end of the file and press ‘Save’ to save it.

.card--standard>.card__content {
    display: none !important;
}

• Here is the result you will achieve:

• Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

[Linealy87]

You rock!! Thanks so much! Fixed! ##- Please type your reply above this
line -##

[Linealy87]

I looked several times and I’m not seeing the “base.css” file

[Linealy87]

I found it, but the problem is when the code is applied I can no longer click on the collection on the site.

[Linealy87]

This worked and looked great, but then when I clicked on the collection the prices/description would no longer show on the products.