How can I adjust my collection page image size?

[oscaroline]

I want my collection page look like this

it looks like this now

can anyone help me?

website: www.sundaypaloma.com

thank you

[hadi765]

I can help you it’s a quick fix, gonna need store access though to fix it.
or if you know the coding i can drop the code for the fix.

Just gotta set a specific height for the image

[oscaroline]

Can I have the code here? thanks

[hadi765]

Sure here you go, just paste this in css file

.product-card .product-card__image {
    height: 400px;
}
.product-card .product-card__image img {
    object-fit: cover;
    height: 100%;
}

Quick thing you can adjust the height by changing that 400px, according to your need

[irene-vintage]

Hello @oscaroline ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Assets folder → base.css file → add this following code at the bottom of page

.product-grid-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.product-item {
  flex-basis: calc(33.3333% - 20px);
  margin-bottom: 40px;
}

@media only screen and (max-width: 767px) {
  .product-item {
    flex-basis: calc(50% - 20px);
  }
}

Save changes

Hope this can help. Let us know if you need any further support.

Ali Reviews team.

[oscaroline]

Is it possible to make it look the same on mobile?

it looks little long on mobile.

Can I make it closer together like the photo above as well?

3 columns on desktop and 2 columns on mobile?

[oscaroline]

Oh it doesn’t work