Questions, feedback, and updates on the new online store design experience
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.
Thank you to everyone who participated in our AMA with Klaviyo. It was great to see so man...
By Jacqui May 30, 2023Photo by Marco Verch Sales channels on Shopify are various platforms where you can sell...
By Ollie May 25, 2023Summary of EventsBeginning in January of 2023, some merchants reported seeing a large amo...
By Trevor May 15, 2023