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.
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
Hi Richard.
Thank you for a prompt response. Unfortunately not has changed. Please see here.
Stange
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
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
you can try adding it to theme.liquid
Follow this:
Go to Online Store->Theme->Edit code->theme.liquid-> 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;
}
}
}}
Hi @NikiSoulMart !
Paste code in theme.css.liquid.