Items do not adjust according to the space available

wyen
New Member
3 0 0

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

 

Thanks and Regards

 

 

 

 

Replies 4 (4)
drakedev
Shopify Partner
680 145 212

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.

If my answer was helpful click Like to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.
wyen
New Member
3 0 0

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

drakedev
Shopify Partner
680 145 212

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;
}

}

 

If my answer was helpful click Like to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.
wyen
New Member
3 0 0

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