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

MrsMacca · ‎01-04-2024

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.

Dan-From-Ryviu · ‎01-04-2024

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 & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu · ‎01-04-2024

Hi @MrsMacca

Please share your store URL please

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

MrsMacca · ‎01-04-2024

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 · ‎01-04-2024

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

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

MrsMacca · ‎01-04-2024

https://rcy45jhi7abru027-59310047402.shopifypreview.com

Thankyou

Dan-From-Ryviu · ‎01-04-2024

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 & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

MrsMacca · ‎01-04-2024

is this correct? Unfortunately it didnt work

Dan-From-Ryviu · ‎01-04-2024

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 & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

MrsMacca · ‎01-04-2024

This worked perfect. Thankyou so much for your help.

Dan-From-Ryviu · ‎01-04-2024

You are very welcome, @MrsMacca

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

PageFly-Henry · ‎01-04-2024

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 · ‎03-12-2024

@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

PageFly-Henry · ‎03-12-2024

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 · ‎03-13-2024

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

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

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

Community Blog Articles