Debut - How to change font size under collections

Solved
melon12345
Excursionist
14 0 7

Hi, 

Can anyone help me in changing the font size under collections on the homepage? (image one)

The font size is too big and too close to the image. I'd like it to match the size and space alignment like my product title (as shown in second image)

1.

Screenshot 2021-03-09 at 01.38.26.png

2.

Screenshot 2021-03-09 at 01.39.12.png

Thank you

0 Likes
dmwwebartisan
Shopify Partner
5844 1337 1714

@melon12345 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
melon12345
Excursionist
14 0 7

I have private message you my details.

Thank you!

dmwwebartisan
Shopify Partner
5844 1337 1714

@melon12345 

Please add the following code at the bottom of your assets/theme.scss.liquid or assets/timber.scss.liquid file.

#shopify-section-161029290334a6e199 .collection-grid-item__title {
color: #3a3a3a;
margin-top: 30px;
text-shadow: none;
position: relative;
}

@media only screen and (max--width: 749px){
.collection-grid-item__title.h3 {font-size: 1.2em !important;}
}

@media only screen and (min-width: 750px){
.collection-grid-item__title {font-size: 1.5em !important;}
}


Hope this works.
Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
melon12345
Excursionist
14 0 7

Hi, the text size has gotten smaller and in a better place now. But the size is still different. How can I get it the same? I believe that the title under my products are bold, so would be good if I could get the text under collections to be bold as well. 

 

Screenshot 2021-03-09 at 10.16.08.pngScreenshot 2021-03-09 at 10.16.14.png

 

Also, the image size ratio is different between products and collections. Could you please advise on how I can get them the same?

 

Many thanks 

dmwwebartisan
Shopify Partner
5844 1337 1714

This is an accepted solution.

@melon12345 

Please add the following code for title and price.

@media only screen and (min-width: 750px){
.collection-grid-item__title {
font-size: 1.2em;
font-family: var(--font-stack-header);
font-style: var(--font-style-header);
font-weight: 600;
}

.product-card__title {
font-weight: 600 !important;
}

}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
melon12345
Excursionist
14 0 7

Thanks a lot for your help!

dmwwebartisan
Shopify Partner
5844 1337 1714

@melon12345 

If helpful then please Like and Accept Solution.

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes