How do I make the featured collection/products taller so my product cards don't get cut off?

[httpnavi]

Hi, 

The featured collection and collection list on my page are cut off, how do I get it to show full images and wider?

this is mine:

I would like it to look like this: 

full width and height

Site is https://combatstudios.online/

and password = webstore

Thanks in advance!

[Mustafa_Ali]

.card__inner {
        height: 100% !important;
    }

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the <style> tag before the body ----->
if this code work please do not forget to like and mark it solution

[httpnavi]

Hi, this didn't change anything on my end

[EBOOST]

Hi @httpnavi ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

2. Assets/component-card.css
3. Add code below to end of file

.product-card-wrapper .card__media .media img {
	object-fit: contain;
}
@media (min-width: 768px) {
  .product-card-wrapper  .card__inner {
    height: 100% !important;

  }
}

[httpnavi]

This worked for the featured products! Thank you!

Do you also know how to do it for the Featured Collection?

[EBOOST · Accepted solution]

Hi,

1. Go to Store Online-> theme -> edit code
2. Assets/base.css
3. Add code below to end of file

.collection-list-wrapper .card .card__inner {
	height: auto!important;
}

.collection-list-wrapper .card .card__inner  .card__media .media,
.collection-list-wrapper .card .card__inner  .card__media img,
.collection-list-wrapper .card .card__inner  .card__media {
	position: static;
}

.collection-list-wrapper .card .card__inner  .card__content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

[httpnavi]

Thank you so much! appreciate all the help! 😁

[httpnavi]

Sorry for asking again, but is there also a way to remove the padding on the sides of the Featured collection?

like this

[EBOOST]

Hi,

You only need add more code below:

.collection-list-wrapper.page-width {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

[httpnavi]

❤️