Looking to truncate space between product photo and product title for product card.

Highlighted
Tourist
18 3 8

I have Narrative theme. So far I have discovered and understand the code referring to section titles for the collection name itself, the code referring to forward facing photos on the collection, I have also changed the column layout for the products to be more presentable on mobile.

I checked into collection-template and did not find what I was looking for regarding truncating the size of the box to remove the space between the product photo and the text. I also want to further reduce the size of this text. I already found where to change the product card color in the template customization options.

If an app can do this, then the section to modify this exists somewhere in the code. How can I modify the product card? Where can I hook into the API to figure it out?Example.png

0 Likes
Highlighted
Tourist
18 3 8

I already figured out how to modify the text alignment and size of the product cards. Still need guidance on truncating the product card spacing. Additionally I would like to have the photos auto cropped to horizontal so it is a consistent pattern across the page.

 

0 Likes
Highlighted
Tourist
18 3 8

Okay I have since figured out how to do most of what I want, however I have one last problem and that is offset column spacing on mobile devices. I understand why that is happening sin e the margins are not automatically adjusting for the increase in text sizes. Anyone know how to fix that part?

 

Screenshot_20200911-220059.png

0 Likes
Highlighted
Tourist
18 3 8

I fixed the issue using no wrap and text overflow but now I want to use text-overflow: "string" to append and I'm not having good luck with this. Anyone have an suggestions?

0 Likes