0

When using a mobile device or a tablet, the titles of my products are cropped. I'd like to simply reduce their size. Take a look to the image:Cropped title

Is there a way to change that? Is it CSS or Php?

The URL of the product is this: https://www.editorialufv.es/catalogo/territory-inhabited/

2

You can add custom CSS where you use media query in order to reduce the font-size of the title in small devices. You also have some styling that remove the line break and add the 3 dots at the end. So you can also remove them.

You can try this code :

@media all and (max-width:480px) {
  .woocommerce div.product .product_title {
    font-size:18px;
    white-space: initial;
    text-overflow: initial;
  }
}

You may adjust the value of font-size as you need.

  • Great, but is there a way to not cropping the title? For instance, making it on two or more lines? – Stefano Dec 25 '17 at 9:17
  • @Stefano yes, simply remove the font size and keep the two other styles ... these style will for ce title to go into multi line – Temani Afif Dec 25 '17 at 9:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.