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) { @media (max-width: 768px) {
/* Dodali smo .purpose-goal in li ter splošne razrede */
p, p,
li,
.purpose-goal,
.about-hero-text p, .about-hero-text p,
.about-accordion-content p, .about-accordion-content p,
.step-card p, .step-card p,
.mediation-detail-text p, .mediation-detail-text p,
.article-body-text p { .article-body-text p {
/* 1. Obojestranska poravnava */
text-align: justify !important; text-align: justify !important;
text-justify: inter-word; /* 2. Distribute za bolj enakomerno razporeditev */
/* 1. Samodejno deljenje z vezaji (če brskalnik pozna slovenščino) */ text-justify: distribute;
-webkit-hyphens: auto; /* 3. Maksimalno agresivno deljenje besed */
-ms-hyphens: auto; -webkit-hyphens: auto !important;
hyphens: auto; -moz-hyphens: auto !important;
/* 2. Prisiljen prelom dolgih besed (če vezaji ne delujejo) */ -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; overflow-wrap: break-word;
word-wrap: break-word; word-break: break-word;
/* 3. Rahlo stiskanje črk (to vizualno močno pomaga zapolniti vrstico) */ /* 6. Zadnja vrstica naj bo vedno levo */
letter-spacing: -0.02em; text-align-last: left !important;
/* 4. Preprečevanje raztegovanja zadnje vrstice v odstavku */
text-align-last: left;
} }
} }