Shopify Question posted in
The Shopify help center can be found here.

Equal height of the each product – Shopify

I am using Shopify theme, I am displaying four product in each row. Everything is working perfectly except product column height. I need the equal height of each column. I tried display: tablethe parent class and display:table-cell to child class but still not working. Also tried display:flex

I am sharing the link to code because of my code huge and not allowing me to upload here.

https://jsfiddle.net/a8ag2270/1/

I am getting the output. I need equal height.
enter image description here

Tags:

3

Answers


  1. 0

    Just add a style to the grid-view-item__link like

    .grid-view-item__link{
    height:400px;
}

    Change the 400 to whatever height you want.

    Here is the fiddle

    Login or Signup to reply.
  2. 0

    Okey, that’s the best I can do for now.

    https://jsfiddle.net/a8ag2270/49/

    .grid.grid--uniform.grid--view-items {
    display: flex;
    flex-wrap: wrap;
}

/* had to target more specifically with (div.grid-view-item) */
/* so the margin: 0px auto 35px; gets overridden */
div.grid-view-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0; /* instead of margin: 0px auto 35px; */
}

.grid-view-item__link.grid-view-item__image-container {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* same story here */
div.grid-view-item__meta {
  margin-top: auto; /* override margin-top: 8px; */
}

    It can probably be done with a lot fewer styles (or maybe not), but I like flexboxes and working with them, so I used that.

    What you need to do on your own is to set min-height to title, description etc. if you want them to be “aligned horizontally” (can’t find the right words for that) with each other.

    The above styles put the price down, right above the button. If you don’t want that behaviour, you can use this:

    .grid.grid--uniform.grid--view-items {
  display: flex;
  flex-wrap: wrap;
}

div.grid-view-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

.grid-view-item__link.grid-view-item__image-container {
  flex: 1;
}

    or this:

    .grid.grid--uniform.grid--view-items {
  display: flex;
  flex-wrap: wrap;
}

.grid__item {
  display: flex;
}

div.grid-view-item {
  display: flex;
  flex-direction: column;
}

.grid-view-item__link.grid-view-item__image-container {
  flex: 1;
}
    Login or Signup to reply.
  3. 0

    add Below code in your css file:

    #Collection > .grid--view-items
{
display: flex;
flex-flow: row wrap;
}

#Collection .grid__item
{
display: flex;
}

#Collection .grid-view-item
{
display: flex;
flex-direction: column;
}

#Collection a.grid-view-item__link.grid-view-item__image-container
{ flex: 1 0 0; }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search