Change Product Title Font/Padding on Collections Page (Brooklyn Theme)

Store Design
1

I’m trying to fix a few issues I am having in mobile view.

I would like to reduce the product title font size (specifically in mobile view), remove that gap between product title & price, remove the dash in front of the price, and eliminate the random empty spaces in the product grid.

Any help would be greatly appreciated! Thank you.

www.shopmagnolia.ca

Screenshot_20220505-151923_Samsung Internet.jpg
Screenshot_20220505-151923_Samsung Internet.jpg1080×2044 233 KB

1 Like
2

@Jenna_gardner

oh sorry for that issue can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media screen and (max-width: 590px) {
.grid-product__title {height: auto;}
.product--wrapper {margin-bottom: 0;}
.grid-product__wrapper {margin-bottom: 10px;margin-top: 0;}
#CollectionSection .grid-uniform {display: flex;flex-wrap: wrap;}
}
1 Like
3

Worked like a charm. Thank you so much!