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.
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022