Solved

How can I make collection titles smaller on my Flex theme version 5.0.1?

MrsMacca
Excursionist
34 0 9

 I would love some help with making these collection titles on my homepage smaller please. I am just updating my Flex theme to the 5.0.1 version. Thankyou for any help.

20240105_130219.jpg

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
8012 1561 1586

This is an accepted solution.

That is correct, and this code is made for mobile only. If you want it works for desktop, please update code to this 

<style>
.collection-list__caption-wrapper--below-image .title {
font-size: 24px;
}
@media (max-width: 749px){
.collection-list__caption-wrapper--below-image .title {
font-size: 16px;
}
}
</style>

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 13 (13)

Dan-From-Ryviu
Shopify Partner
8012 1561 1586

Hi @MrsMacca 

Please share your store URL please 

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

MrsMacca
Excursionist
34 0 9

https://funfidgets.com.au

 

The current live is the 2.2.2 Flex version, which has the titles the size I would like them to be on my unpublished 5.0.1 version

Dan-From-Ryviu
Shopify Partner
8012 1561 1586

Please share the preview URL of the unpublished theme Screenshot 2024-01-05 at 09.14.05.pngScreenshot 2024-01-05 at 09.14.31.png

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

MrsMacca
Excursionist
34 0 9
Dan-From-Ryviu
Shopify Partner
8012 1561 1586

Go to Online store > Themes > click three dots button on that theme >  Edit code > open theme.liquid file, add this code below under <head> element 

<style>
@media (max-width: 749px){
.collection-list__caption-wrapper--below-image .title {
font-size: 16px;
}
}
</style>

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

MrsMacca
Excursionist
34 0 9

17044222354437442139328222416677.jpg

 is this correct? Unfortunately it didnt work

Dan-From-Ryviu
Shopify Partner
8012 1561 1586

This is an accepted solution.

That is correct, and this code is made for mobile only. If you want it works for desktop, please update code to this 

<style>
.collection-list__caption-wrapper--below-image .title {
font-size: 24px;
}
@media (max-width: 749px){
.collection-list__caption-wrapper--below-image .title {
font-size: 16px;
}
}
</style>

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

MrsMacca
Excursionist
34 0 9

This worked perfect. Thankyou so much for your help.

Dan-From-Ryviu
Shopify Partner
8012 1561 1586

You are very welcome, @MrsMacca 

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

PageFly-Henry
Shopify Partner
1170 332 281

HI @MrsMacca 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file styles.css

Step 3: Paste the below code at bottom of the file -> Save

 

.jsCollectionList span.title {

    font-size: 16px !important;

}

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

disappearhere
Tourist
8 0 2

@PageFly-Henry Im having this issue on mobile view (huge collection photos...is there a way I can increase the number of collection images per line or make them smaller? My site is www.disappearhere.org

Im happy to donate to anyone that can help

Screenshot 2024-03-12 131322.png

PageFly-Henry
Shopify Partner
1170 332 281

You can try with this code:

@media (max-width: 767px){
.collection-list__item.grid__item {
max-width: calc(32% - var(--grid-mobile-horizontal-spacing) / 2) !important;
}}

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

disappearhere
Tourist
8 0 2

Thanks for your reply @PageFly-Henry where abouts would I post this in the Spotlight code? I looked for a styles.css as in the previous advice above and there was no such section. TIA