Featured Collections Headings

Solved
Highlighted
Explorer
86 7 14

Hello,

 

How to change featured collections and collections (categories) headings/titles size? I am using Brooklyn theme. Vileep.com

 

Thank you in advance!

0 Likes
Highlighted
Shopify Partner
950 142 155

This is an accepted solution.

Hi There!

Use this for the collections heading & featured collection:

h1:not(.hero__title) {
    color: red;
}

  

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
1 Like
Highlighted
Shopify Partner
2385 516 666

This is an accepted solution.

Hey @Dumax 

Try this CSS class.

Add code assets/theme.scss.liquid Or assets/timber.scss.liquid bottom of the file

@media screen and (min-width: 591px){
.collection-grid__item-title {font-size: 1.5em !important;}
}


Hope this will work for you.


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
1 Like
Highlighted
Explorer
86 7 14

12.png

0 Likes
Highlighted
Explorer
86 7 14

h1:not(.hero__title) {
font-size: 5em
}

 

I've added this it worked! But now the text is too big on mobile. How do I make it different size for mobile? Thanks!

0 Likes
Highlighted
Shopify Partner
950 142 155

This is an accepted solution.

Use this, adjust as needed.

@media (max-width: 768px)
{
h1:not(.hero__title) {
font-size: 2.5em
}
}

 

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
1 Like
Highlighted
Shopify Partner
2385 516 666

 

Hey @Dumax 

Try this CSS class.

Add code assets/theme.scss.liquid Or assets/timber.scss.liquid bottom of the file

 

@media screen and (max-width: 590px){
.collection-grid__item-title {font-size: 1em !important;}
}

 

 

Hope this will work for you.

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
Explorer
86 7 14

I've added both codes for desktop and mobile, but now website design crashes.

}
h1:not(.hero__title) {
font-size: 3em;
}
@media (max-width: 768px)
{
h1:not(.hero__title) {
font-size: 2em
}
}

0 Likes
Highlighted
Shopify Partner
950 142 155

This is an accepted solution.

Remove the first "}" they should be opened and closed equally.

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
1 Like
Highlighted
Explorer
86 7 14

Thank you !

0 Likes