How can I make my Title to be written in 2 lines only for desktop users

Deutsch Diskussion Shopify-Diskussionen

Topic summary

A user seeks to limit their product title display to 2 lines instead of 3 on desktop devices. The title shown in the screenshot is quite long in German.

Proposed Solutions:

  1. Shorten the title - Reduce text length (e.g., to “Elektrische Dampfbürste & Pflegekam”) since additional details are already visible in the product image

  2. Adjust font size via CSS - Use media queries to set smaller font-size on desktop while maintaining larger text on mobile (max-width 765px)

  3. Alternative approaches:

    • Widen the container
    • Use a wider screen format (16:9)

The discussion remains open with no confirmed resolution, though multiple viable technical and content-based options have been suggested.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hello guys, how can I make my Title be written in 2 lines instead of 3, only for desktop users.

Bildschirmfoto 2025-01-20 um 08.20.41.png
Bildschirmfoto 2025-01-20 um 08.20.41.png2596×1314 467 KB

2

The short answer: reduce the length of the product title as it is very long. Something like Elektrische Dampfbürste & Pflegekam will suffice, believe me. The user can see the rest, which is repeated in the main image to the left anyway, so doppelt-gemoppelt…

3 
.css-class {
font-size: 5px;
}

@media screen and (max-width 765px) {
.css-class {
font-size: 25px;
}
}

So kannst du die Class auf Desktop (erste CSS-Anweisung) und Mobile (zweite CSS-Anweisung) anders setzen und die Schrift kleiner machen.

Weitere Möglichkeiten:

  1. Titel kürzen
  2. Container breiter machen
  3. Größeren Bildschirm verwenden (z.B. 16:9)