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

 

 

 

 

0 Likes

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 the problem is solved remember to click ✅ to Accept Solution
• Press Like ?? if the answer was helpful
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.
0 Likes
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.

0 Likes

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 the problem is solved remember to click ✅ to Accept Solution
• Press Like ?? if the answer was helpful
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.
0 Likes
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

0 Likes