adjust spacing on collection page

TorwoodGC
Excursionist
22 0 16

Hi,

my website has an issue that has been bothering me for some time.

The first image shows the issue.

When descriptions are on two lines, the price and special offer elements are placed immediately below the description. When the description runs onto two lines thes elements are moved down.

The two arrows show the single line items.

The second image shows how I would like the page to look.

Do you think that this is possible in the Debut theme?

I'd be grateful for any input, even if it's telling me that it is impossible 😄 

Thanks

Screenshot 2024-02-17 12.48.11.jpgScreenshot 2024-02-17 12.48.11 -2 copy.jpg

Replies 4 (4)

suyash1
Shopify Partner
9134 1137 1484

@TorwoodGC - can you please share this page link?

To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session
TorwoodGC
Excursionist
22 0 16
suyash1
Shopify Partner
9134 1137 1484

@TorwoodGC - add this css to the very end of theme.css file and check

 

@media screen and (min-width:994px){
.h4.grid-view-item__title.product-card__title{min-height: 55px;}
}

@media screen and (min-width:750px) and (max-width:993px){
.h4.grid-view-item__title.product-card__title{min-height: 65px;}
}


@media screen and (max-width:749px){
.h4.grid-view-item__title.product-card__title{min-height: 40px;}
}
To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session
TorwoodGC
Excursionist
22 0 16

Hi,

Thanks for your help.

I added the css as requested and it has made no difference.

 

Kenny