mark
/
prosberry
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Aggressive mobile text justification fix - V3
Deploy to Development and Production / deploy (push) Successful in 3m29s Details 

- Changed text-justify from auto to distribute for better spacing
- Added hyphenate-limit-chars: 4 2 2 for more aggressive word breaking
- Increased letter-spacing compression to -0.5px
- Added word-spacing: -1px to reduce gaps between words
- This should eliminate large white gaps on mobile while maintaining justified text
This commit is contained in:
Mark 2026-02-11 00:18:06 +01:00
parent f4c783cd69
commit f5c337cedf
1 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
css/style.css
View File

@ -7590,26 +7590,35 @@ html, body {
}
}
/* Izboljšan popravek za prevelike razmike med besedami na mobilnikih */
/* Izboljšan popravek za prevelike razmike med besedami na mobilnikih - V3 AGRESIVNO */
@media (max-width: 768px) {
/* Dodali smo .purpose-goal in li ter splošne razrede */
p,
li,
.purpose-goal,
.about-hero-text p,
.about-accordion-content p,
.step-card p,
.mediation-detail-text p,
.article-body-text p {
/* 1. Obojestranska poravnava */
text-align: justify !important;
text-justify: inter-word;
/* 1. Samodejno deljenje z vezaji (če brskalnik pozna slovenščino) */
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
/* 2. Prisiljen prelom dolgih besed (če vezaji ne delujejo) */
/* 2. Distribute za bolj enakomerno razporeditev */
text-justify: distribute;
/* 3. Maksimalno agresivno deljenje besed */
-webkit-hyphens: auto !important;
-moz-hyphens: auto !important;
-ms-hyphens: auto !important;
hyphens: auto !important;
-webkit-hyphenate-limit-chars: 4 2 2;
hyphenate-limit-chars: 4 2 2;
/* 4. Stisni črke in besede */
letter-spacing: -0.5px !important;
word-spacing: -1px !important;
/* 5. Prelomi besede kjerkoli, če je potrebno */
overflow-wrap: break-word;
word-wrap: break-word;
/* 3. Rahlo stiskanje črk (to vizualno močno pomaga zapolniti vrstico) */
letter-spacing: -0.02em;
/* 4. Preprečevanje raztegovanja zadnje vrstice v odstavku */
text-align-last: left;
word-break: break-word;
/* 6. Zadnja vrstica naj bo vedno levo */
text-align-last: left !important;
}
}