Reduce Font of Product Titles & Prices in Collection Pages of Dawn

Store Design
1

I would like to reformat the font size of product titles & prices in the collection pages to be smaller. Can someone please advise how to adjust?

@Zworthkey

2 Likes
2

ofcourse i can help you.

3 
h1.product__title {
    font-size: 12px !important;
}

add this on the base.css

4 
.price {
    font-size: 12px !important;
}

@GIREGGIA

Add this in the component-price.css

5

@Zworthkey this works great for adjusting the product page titles which is also needed but it doesnt seem to affect the titles in the collection pages. Sharing an image for reference

6

@GIREGGIA

1 ] Please add following the CSS code to your assets/component-price.css bottom of the file.

.collection .price {font-size: 1.2rem !important;}

2] Please add following the CSS code to your assets/component-card.css bottom of the file.

@media only screen and (min-width: 750px){
.collection .h5, .collection h5 { font-size: .8em !important;}
}

Thanks!

7 
.card-information__wrapper>.price {
    font-size: 12px !important;
}

@GIREGGIA
Add this code in component-card.css

1 Like
8

@Zworthkey great that works for the price! What can be done for product description?

Screenshot 2022-01-13 at 5.47.28 PM.png
Screenshot 2022-01-13 at 5.47.28 PM.png1360×252 76.5 KB

9

@dmwwebartisan that seems to only work for desktop but the product descriptions are still much larger in mobile view.

10 
h3.card-information__text.h5 a {
    font-size: 12px !important;
}

@GIREGGIA
Add this code in the bottom of component-card.css

1 Like
11

thank you! @Zworthkey

1 Like