Items do not adjust according to the space available

Retired Boards Appdev Store Design
1

Hi All,

I have added the following CSS code in theme.scss.liquid. Now collection picture and the title are removed but items do not adjust according to the space available. Any idea what should I do?

.grid__item.small–one-half.medium-up–one-fifth.collection__cover
{
display: none;
}

Store Link: https://inspireitem.com/

wyen_0-1626600751780.png
wyen_0-1626600751780.png1159×589 323 KB

Thanks and Regards

2

They do not adjust the space because all items uses the class medium-up–one-fifth that by definition is 20% width.

By setting display:none you are just hiding some elements, but the width of other items need to be adjusted too if you want to occupy 100% of the row width.

What are you trying to achieve? If you give me more details we can try to help.

3

I just want that after the removal of the collections title and image, the items get adjusted according to space.

4

Here’s a behavior that it’s a bit a CSS hack that you can add at the end of your theme.scss file, I would suggest you to take a look to the liquid to code for a better result

@media and screen(min-width: 750px) {

.grid__item.small--one-half.medium-up--one-fifth:nth-of-type(2), .grid__item.small--one-half.medium-up--one-fifth:nth-of-type(3), .grid__item.small--one-half.medium-up--one-fifth:nth-of-type(4) {
    width: 33%;
}
.grid__item.small--one-half.medium-up--one-fifth:nth-of-type(2) .product-card__image, .grid__item.small--one-half.medium-up--one-fifth:nth-of-type(3) .product-card__image, .grid__item.small--one-half.medium-up--one-fifth:nth-of-type(4) .product-card__image {
    max-width: 100% !important;
}

}
5

It partially resolves the issues. It makes the first 3 members big and another little bit small but it does not adjust the page.

https://inspireitem.com/collections/home-decor