Dawn Theme collection page product grid title alignment

Store Design
1

I use Shopify Dawn theme. Here is the store link https://comfyfurfi.myshopify.com/

In Dawn Theme, for the default collection, If you select Product Card image ratio “Adapt to Image”, the product title is not lined up horizontally if your product images are different sizes. See attached.

What I would like to do is to select “Adapt to Image” in product card image ratio and I need all product titles lined up horizontally.

If you select square for Image ratio, product titles are lined up but image cuts out in the collection page product grid. I appreciate for the help.

2

Hi @comfyfurn ,

Layoutbase here, you might consider adding the following code:

  1. Go to Online Store → Theme → Edit code
  2. Asset → /base.css
  3. Paste the following to the bottom of the file:
.card:not(.ratio)>.card__content {

    grid-template-rows: none;
    flex-grow: initial;

}

.card__inner {

   margin-bottom: auto;

}

.card__heading a {

 height: 35px;

 overflow: hidden;

}

Hope you find this suggestion helpful!

Best regards,

Layoutbase - Drag & Drop page-builder

3

Hi @comfyfurn ,

Go to Assets > base.css and paste this at the bottom of the file:

.collection .card--standard>.card__content .card__information {
    align-self: flex-end !important;
    grid-row-start: 3 !important;
    justify-self: flex-start !important;
}

Hope it helps!

4

It worked. Thank you for your help

5

Hi Layoutbase,

For the above scenario, is there any way of aligning the product photo’s to bottom as well?

The text is all in line, however the product photo’s are aligned to top, which makes it look unusual.

Thanks!