search

pixelgrade / patch

Patch is a newspaper‐inspired WordPress theme for writers who are keen to present their ideas with attitude.
https://pixelgrade.com/themes/patch
GNU General Public License v3.0
2 stars 0 forks source link

[Mobile] Limit larger "Site Title" font size to overlap and cause horizontal scrolling #222

Closed Alexandru-Teodorescu closed 5 years ago

Alexandru-Teodorescu commented 5 years ago

Au apărut câteva cazuri legate de un extra spațiu pe mobile când faci swipe dreapta. Am descoperit că problema ar putea veni de la opțiunea din Customizing ▸ Theme Options Header ▸ Logo Height, dacă setezi height-ul peste 50px, atunci se va crea acel extra spațiu pe varianta de mobile. Cred că acest issue are legatura cu cel de aici: https://github.com/pixelgrade/patch/issues/193.

Screenshot:

Video:

Video:

Quick fix: 

.site-title {
    font-size: 18px;
}
georgeolaru commented 5 years ago

Din ce am testat, scroll-ul orizontal e cauzat de font-size-ul aplicat pe textul din .site-title – div ascuns atunci cand este folosita o imagine ca logo (ca in demo).

image

Propun ca abordam issue-ul din 2 perspective:

  1. Sa gasim o alta modalitate de a ascunde titlul text (acum e cu absolute + clip)
  2. Sa folosim o abordare gen fit-text pentru a nu permite titlului sa iasa in afara containerului (atunci cand e pus ca font-size: 150px; dar totusi sa se redimensioneze pentru cuvintele lungi astfel incat sa incapa in container.

Resurse:

madalingorbanescu commented 5 years ago

Propunerea mea ar fi sa nu aplicam valoarea din optiunea Logo Height, ca font size pe site title. Site title si logo-ul sunt 2 componente diferite si asa trebuie tratate.

Nu vad de ce am pune acel font-size: 150px, dar totusi sa il limitam in functie de lungimea cuvintelor.

@georgeolaru ce zici, scoatem acel font size de pe site title?

georgeolaru commented 5 years ago

@madalingorbanescu Inteleg rationamentul – inainte sa implementam sugestia am cateva intrebari:

  1. Ce se intampla cu clientii actuali care folosesc optiunea cu "font-size"? Astazi ea e folosita de cei care nu folosesc o imagine pentru logo.
  2. Ce dimensiune setam ca font-size default?

Ideal ar fi fost sa avem un "max-font-size" echivalent cu "max-height-ul" de la imagine.