How to minimize title size on mobile?

[NikosBat]

Hello guys, how can I minimize the title size only for mobile version?

[RKon12]

Add similar CSS code to your theme.css or base.css file to reduce the title size only on mobile screens:

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

If your title uses a different class, inspect the element in your browser and replace .product-title with the correct class name. Save the changes and test on a mobile device.

[Promer-Alena]

You can adjust the product title size on mobile by adding a small piece of CSS to your theme. Go to Online Store > Themes > Edit Code, then open base.css (or theme.css depending on your theme) and add this at the bottom:

@media (max-width: 768px) {
.product-single__title {
font-size: 18px !important; /* Adjust size as needed */
}
}

This will reduce the title size only on mobile devices. If the class .product-single__title doesn’t work, inspect the element using Chrome DevTools or Shopify’s theme editor to find the correct class