Making text smaller on only one collection title

Solved
Highlighted
Excursionist
15 0 4

Hello! Can anyone help?

 

I need to make the text smaller on one collection (they are aligned 5 x 2)

The text for Thermometers is showing up as:

Thermo-

meters

 

Is there anyway to change the font on only this 1 collection?

Please let me know if you can help.

Thank you!

0 Likes
Highlighted
Shopify Partner
24 2 7

You could view the page in chrome and use the dev tools to view the underlying code and pick out the collection’s class/ID. Then you could drill down to the appropriate text (eg the p tag) and alter the text size with CSS. 

That said it’s not great practice to alter text size just to make it fit. It’s likely to become small and poor accessibility-wise.

 Have you considered altering the layout instead?

0 Likes
Highlighted
Excursionist
15 0 4

How can I change all the text on ONLY the collections page? It's too big on all of the collections, it's showing up completely wrong on my ipad - can you help?

0 Likes
Highlighted
Excursionist
15 0 4
How can I change all the text on ONLY the collections page? It's just too
big - can you help?
0 Likes
Highlighted
Shopify Partner
1632 358 484

Hey @taylorlaidlaw,

Can you please share your website URL and a screenshot? so I can check and give you a solution here.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Shopify Partner
6134 896 2071

@taylorlaidlaw 

I have to check this but I can see this collection, but I can see the collection list title do you need this so please below code.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (min-width: 750px) {
#shopify-section-list-collections-template ul li:nth-child(5) .collection-grid-item__title {
    padding: 0 15px;
    font-size: 24px;
}
}

 

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Excursionist
15 0 4

Thank you! That worked on desktop, it made thermometers in one line. 

 

But on my ipad it still looks like this:

IMG_65DC04CD5A4F-1.jpeg

0 Likes
Highlighted
Shopify Partner
6134 896 2071

This is an accepted solution.

@taylorlaidlaw 

Thank for more clear task
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media (min-width:750px ) and (max-width:1199px) {
#shopify-section-list-collections-template li.grid__item {
    width: 33.333%;
    clear: none;
}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Excursionist
15 0 4

It worked :) Thanks for all your help!

1 Like
Highlighted
Shopify Partner
6134 896 2071

@taylorlaidlaw 

Thanks for your compliment 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes