Font Size Settings Issue - Based on the Vision Theme

[yusihuman]

I currently have three requests:

1. I would like to change the font size of the product titles on my homepage. The default font size in the theme is currently too large, and I would like to make it smaller.

2. The product titles on the homepage are currently displayed in full. I would like the titles to only show two lines, with any text exceeding two lines being truncated with an ellipsis (...).

For both the first and second requests, the desired result is as shown in the image below. I would like the font size adjustments to apply to both desktop and mobile versions.

The third request is:

1. I would like to reduce the font size and line spacing for the product titles on the product page. The ideal reference for this is shown in the image below.
   

[websensepro]

Hi @yusihuman , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

[topnewyork]

Hello, @yusihuman 
Please share "Store URL"
Thanks!

[DaisyVo]

Hi @yusihuman 

Could you please share your store link with us for further checking?

Looking forward to hearing from you soon. Thank you!

Best,
Daisy - Avada Support Team.

[yusihuman]

store URL:https://mqexgm-c0.myshopify.com/?_ab=0&_fd=0&_sc=1
password:reampi

[DaisyVo · Accepted solution]

Hi @yusihuman 

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
Step 2: Search for "theme.liquid" file: https://prnt.sc/b6xveIKe-Rh2
Step 3: Open the file and search for </head> tag and add the following code above </head> tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:

{% style %}
{% if template == 'index' %}
.product-card-info a.product-card-title {
    font-size: 13px !important;
display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
{% endif %}
{% if template == "product" %}
h1.product-title {
    font-size: 20px !important;
    line-height: 20px !important;
}
{% endif %}
{% endstyle %}

 

 

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[yusihuman]

Thank you so much for your help, the issue has been perfectly resolved. However, I’m now facing a new problem: the mobile view of the product page seems to be displaying incorrectly, as shown in the image below.

Could you please assist me in resolving this issue? I would really like the product page to be fully responsive on mobile devices.

Additionally, I noticed that both the mobile view of the homepage and the product page have an issue with the font size of the product prices being too large. Could you please help fix this as well? I greatly appreciate your assistance.

[DaisyVo]

Hi @yusihuman 

To ensure that other users can find appropriate answers when searching for similar questions on the community, I will address your requests within your original goal.

If this resolves your issue, I will be grateful if you mark our answer as the solution.

If you have another question, feel free to create a new thread and tag me. I’ll take a look and do my best to assist.

Best,
Daisy - Avada Support Team.

[yusihuman]

store URL:https://mqexgm-c0.myshopify.com/?_ab=0&_fd=0&_sc=1
password:reampi

[topnewyork]

Hello, @yusihuman 
1) Go to Online Store
2) Edit Code
3) Find theme.css/base.css file
4) Add the following code in the bottom

h1.product-title {
    font-size: 21px !important;
}

 Thanks! 

[websensepro]

@yusihuman Solution for your Third request:

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

h1.product-title {
    font-size: 30px !important;
    line-height: 1.2 !important;
}

 If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!