Access a community of over 900,000 Shopify Merchants and Partners and engage in meaningful conversations with your peers.
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/
Thanks and Regards
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.
I just want that after the removal of the collections title and image, the items get adjusted according to space.
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;
}
}
It partially resolves the issues. It makes the first 3 members big and another little bit small but it does not adjust the page.
Connect your PayPal account to allow your customers to checkout using the PayPal gateway a...
ByYour online store speed can enhance your store’s discoverability, boost conversion rates a...
ByShopping is at our fingertips with mobile devices. Is your theme optimized to be user-frie...
By