Product title smaller

Store Design
,
1

Does anybody know how we can make our product title smaller on mobile? We would like to keep the size on desktop but on smaller on mobile

URL:

Screenshot 2024-12-28 at 10.22.58.png
Screenshot 2024-12-28 at 10.22.58.png706×1360 70.9 KB

2

Hello @JoaquinExcitare ,

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your base.css file and paste the following code at the bottom:

.product__info-container .product__title h1 {
    font-size: 16px !important;
}

Regards
Guleria

3

Hello @JoaquinExcitare

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width:767px){ .product__title h1 { font-size: 18px !important; } }

RESULT:

Tech_Coding_0-1735378248225.png
Tech_Coding_0-1735378248225.png318×496 42.8 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

4

Hello @JoaquinExcitare
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

.product__title h1 {
font-size: 18px !important;
}

result

95.png
95.png374×539 45.9 KB

Thanks

5

Hi @JoaquinExcitare

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

1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

@media screen and (max-width: 768px){
.product-title {
font-size: 12px !important;
}
}

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

6

Hello, i am manikkshay and i have a issue in my featured collection section my product title are to long so i want to make shorter or 3 dots after some word so how can i do this is very improtant

7

Hello @MANIKKSHAY

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.featured-collection .product-title { white-space: nowrap; /* Prevents the text from wrapping */ overflow: hidden; /* Hides overflow text */ text-overflow: ellipsis; /* Adds ellipsis */ max-width: 200px; /* Adjust width based on your layout */ }

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

8

can guid with pics buz i dont understand

9

@MANIKKSHAY would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

10

where to paste the code in theme liquid section

11

https://manikkshay.in/

pasword : 788788665

12

thnx its work

13

@MANIKKSHAY You’re very welcome! I’m delighted that the solution was helpful. Feel free to reach out if you need any further assistance in the future. If you found this information valuable, I’d be grateful if you could give it a thumbs-up and accept the solution.