How to change the collection title size?

NikiSoulMart
New Member
7 0 0

Hey community.

 

Hope you have a great day. Can you please help me with one task? I wonder how to make a small collection title so it looks better on the mobile. We have an Expanse theme, here is the link to the website https://soulmart.ca/ (pass: kona)

Examples:

desktop: https://prnt.sc/pbImxhf4Qdib

mobile: https://prnt.sc/wulPTxoB1nxH

I tried to add this code to theme.css .collection-item .collection-item__title { font-size: 12px; } yet is not working.

 

Any suggestions? Thanks in advance.

 

 

Replies 6 (6)
PageFly-Richard
Shopify Partner
2750 605 1243

Hi @NikiSoulMart 

 

I’m Richard Nguyen from PageFly- Free Landing Page Builder

 

You can try with this code.

Follow this:

Go to Online Store->Theme->Edit code->theme.css->paste bellow code in bottom of file

 

@media not all and (min-resolution:.001dpcm)

{ @supports (-webkit-appearance:none) {

  @media (max-width:767px){ .collection-item__title {

font-size: 12px !important;

}

  }

}}

 

If you feel my answer is helpful, like it or mark it as a solution. Let me know if you have any questions.

Best regards,

Richard | 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. 


Let’s create a unique website design with PageFly for free now! 


 




NikiSoulMart
New Member
7 0 0

Hi Richard.

 

Thank you for a prompt response. Unfortunately not has changed. Please see here.

https://prnt.sc/rx5Bg5ePGD2Q

https://prnt.sc/wh3S93m3PEGJ

 

Stange

PageFly-Victor
Shopify Partner
6878 1403 2642

Hi @NikiSoulMart!

 


This is PageFly - Advanced Page Builder. I would love to give you some recommendation.

 

Add this code to Assets--->theme.scss.liquid:

 

// This is for title
.section-header h2 {
font-size: 35px;
}

 

And this for;

 

// This is for navigation
.site-nav li {
font-size: 25px;
}

 

 You can adjust px as you want.

 

Best Regards;

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. 


Let’s create a unique website design with PageFly for free now! 

NikiSoulMart
New Member
7 0 0

I just noticed that we don't have theme.css file, we have only theme.css.liquid

 

Where elsewhere I can pass the code? @PageFly-Richard @PageFly-Victor 

 

Cheers

PageFly-Richard
Shopify Partner
2750 605 1243

@NikiSoulMart 

you can try adding it to theme.liquid

Follow this:

Go to Online Store->Theme->Edit code->theme.liquid-></style> tag->paste bellow code in bottom of file

 

@media not all and (min-resolution:.001dpcm)

{ @supports (-webkit-appearance:none) {

  @media (max-width:767px){ .collection-item__title {

font-size: 12px !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. 


Let’s create a unique website design with PageFly for free now! 


 




PageFly-Victor
Shopify Partner
6878 1403 2642

Hi @NikiSoulMart !

 

Paste code in theme.css.liquid.

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. 


Let’s create a unique website design with PageFly for free now!