Dawn - Spread elements equally on product page grid

Store Design
1

I’m trying to spread elements equally on the product page.

As you can see from the below 3 images, the product name, grey bar and price are not equally spread.

mike204_0-1647610100235.png
mike204_0-1647610100235.png2060×1316 247 KB

2

Hi @mike204 ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

3

Thanks for quick reply.

Here’s link to website: https://q81nrzliwebgvc66-20717563.shopifypreview.com

4

Hi @mike204 ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/component-card.css->paste below code at the bottom of the file:
.card-information {
    margin-top: 20px !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

5

I’ve tried that, and it’s still the same

6

Hi @mike204 ,

I see that the css code has been received. The distance between the parts is also the same.

Sorry, If I misunderstood you. Can you explain the problem you’re having?

Thanks you

7

I’ve trying to spread all elements within the product card equally.

Below, you can see the black line. I would like the grey bar to be equal across all cards regardless of the content inside.

mike204_0-1647612911422.png
mike204_0-1647612911422.png2060×1316 250 KB

8

Hi @mike204 ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/component-card.css->paste below code at the bottom of the file:
.card__heading {
    height: 70px;
    overflow: hidden;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

9

Thanks for that! Is there a solution using flex or grid?

10

Hi @mike204

thank you for reply.

sorry. The use of flex or grid is not allowed on this part.

11

To use flex and avoid fixed height you may try this:

.card__heading {
    height: unset;   /* override the fixed height rule */
    margin-bottom: auto;
}

.card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.card__content {
    height: 100%;
    display: unset;      /* undo the grid, should be fine with default block */
    margin-bottom:3rem;
}

.card__content > .card__information {
    height: 100%;
    display: flex;
    flex-direction: column;
}
12

Thanks Tim! Works perfect!