Solved

change font size on collection page of DAWN 2.0

Wishpools
Excursionist
20 0 4

Hi everyone, is there any way to change the font size on the collection page under the theme DAWN?

I feel that the title of the product in the grid is too small to read on the mobile screen.

Accepted Solution (1)
Zworthkey
Shopify Partner
5581 642 1565

This is an accepted solution.

hii, @Wishpools 
Paste this code on top of the component-card.css file.

span.card-information__text.h5 {
    font-size: 20px !important;
}

Thank You.

View solution in original post

Replies 7 (7)

dmwwebartisan
Shopify Partner
12280 2546 3694

@Wishpools 

Please share your store URL.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

diego_ezfy
Shopify Partner
2935 562 883

@Wishpools,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

.card-information__text{
    font-size: 20px !important;
}

@media (max-width: 749px){
    .card-information__text{
    font-size: 15px !important;
}
}


You can change the values as per your wish:

20px = font size for desktop
15px = font size for mobile

diego_ezfy_0-1632451118257.png

 


Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

Wishpools
Excursionist
20 0 4

Hi Diego,

I inserted the coding as you introduced. But it seems doesn't work. Please kindly see the screen copy.

 

Zworthkey
Shopify Partner
5581 642 1565

This is an accepted solution.

hii, @Wishpools 
Paste this code on top of the component-card.css file.

span.card-information__text.h5 {
    font-size: 20px !important;
}

Thank You.

Wishpools
Excursionist
20 0 4

That's work! thanks! @Zworthkey 

TheNorthCurve
Excursionist
16 0 9

Not working for me, unfortunately. Has the file been modified since, please?

pgl
Shopify Partner
1 0 0

Didn't work for me either.

 

EDIT: Based on this thread, I found the solution; https://community.shopify.com/c/shopify-design/font-size-dawn-theme/m-p/1347183

A small tweak to the answer above...

.collection .card-information__text.h5 {
font-size: 20px;
}