Top align product titles in Narrative theme

Top align product titles in Narrative theme

OfTheseMountain
Tourist
4 0 3

Hi, 

Can someone please help me horizontally align the titles of my products to the top? My website is: ofthesemountains.com. Link to an example of the type of page on my site I'm referring to: https://ofthesemountains.com/collections/t-shirts

I would like for each title to start on the same line. Hope that makes sense. Below is a pic to clarify. The red line is where I want the top of each title to start (ex. each title would start where the title "I love you to the mountains.." starts). I think they're center aligned right now. 

 

Screen Shot 2024-01-19 at 1.27.40 PM.png

 

 

I want the pricing line to remain horizontally aligned with each other as well. I also want  to reduce the spacing between the images, titles & prices but keep it all cohesive if possible. Doesn't have to be equal just as long as the images, product titles, and prices are all horizontally aligned. Below is a photoshopped example of ideally how I would like everything to look. My top priority is getting the titles aligned to the top though! 

OTM_LookBook_Tees_1.jpg

 

Sorry hope this wasn't too confusing. Any help is greatly appreciated!! 

 

Thanks so much. 

 

Replies 3 (3)

ZenoPageBuilder
Shopify Partner
1052 203 221

Hello @OfTheseMountain 👋

In Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

.collection-template .card__info {
    position: relative !important;
}

.collection-template .card__info .card__name {
    height: 54px !important;
}

The result

Screenshot 2024-01-20 at 08.20.05.png

Hope that helps!

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com

PageFly-Oliver
Shopify Partner
878 190 176

Hi @OfTheseMountain ,

 

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

 

<style>
#MainContent .collection-template .jdgm-widget{
display:block !important;
min-height:20px
}
#MainContent .collection-template .card__name{
min-height:84px
}
</style>

 

 

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Carlomark
Tourist
16 0 1

Works for any theme? tried it on my venture theme and does not work?