How to resize the collection title for mobile view?

[NikiSoulMart]

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.

[PageFly-Richard]

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

[NikiSoulMart]

Hi Richard.

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

https://prnt.sc/rx5Bg5ePGD2Q

https://prnt.sc/wh3S93m3PEGJ

Stange

[NikiSoulMart]

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]

@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;

}

  }

}}

[PageFly-Victor]

Hi @NikiSoulMart !

Paste code in theme.css.liquid.

[PageFly-Victor]

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