/* ============================================================ VIMAB — mobil layout Rättar två fel som bara syns på telefon: rubriker som klipps av mitt i ett ord, och tabeller som tvingar hela sidan att zooma ut. Ingenting här rör desktop-utseendet. ============================================================ */ /* ------------------------------------------------------------ 1. Rubriker som klipps av — långa svenska sammansättningar ------------------------------------------------------------ Displayrubrikerna ligger i behållare med overflow:hidden, så ett ord som inte får plats kapas rakt av i stället för att bara spilla ut. "Leverantörsoberoende" försvann till "Leverantörsoberoen" redan vid 414px, och vid 320px drabbades 16 sidor — hjälterubrikerna på Verkstadsservice, Ångfällemätning, Skräddarsydd egentillverkning och flera policysidor. overflow-wrap:break-word är en ren säkerhetsventil: den gör ingenting så länge ordet får plats, och används alltså på alla bredder utan att påverka typografin. */ h1, h2, h3, h4, h5, h6, .title-text, .pp-primary-title, .pp-secondary-title, .fl-heading-text { overflow-wrap: break-word; word-break: normal; } /* Avstavning läggs bara på telefon. Där är alternativet ett godtyckligt brott mitt i ordet, och med lang="sv-SE" på avstavar webbläsaren efter svenska regler ("Leveran-törs-obero-ende"). På större skärmar låter vi typografin vara — hyphens:auto avstavar även när ordet hade fått plats, och det vill vi inte i rubrikerna. */ @media (max-width: 767px) { h1, h2, h3, h4, .title-text, .pp-primary-title, .pp-secondary-title, .fl-heading-text { -webkit-hyphens: auto; hyphens: auto; } } /* ------------------------------------------------------------ 2. Tabeller i brödtext — tvingade hela sidan att zooma ut ------------------------------------------------------------ Tabellen i integritetspolicyns avsnitt 7 har fyra kolumner och ett minsta innehållsmått på ca 427px. Eftersom en tabell inte kan krympa under det växte layoutviewporten till 482px på ALLA telefoner — hela sidan ritades nedskalad, och den sista kolumnen klipptes ändå bort. Som egen scroll-container slutar tabellen att bidra till sidans minsta bredd, och viewporten återgår till telefonens egen. Tabellen scrollas i stället i sidled på plats. Bara under 600px: över det får tabellen plats i spalten, och overflow-x:auto visar då ingen scrollbar ändå. */ @media (max-width: 600px) { /* Både rich-text- och HTML-modulen: integritetspolicyns tabell ligger i en BB HTML-modul (.fl-html), inte i rich-text. */ .fl-rich-text table, .fl-html table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* display:block gör tabellen shrink-to-fit, så cellerna måste få behålla sin egen bredd i stället för att pressas ihop. */ .fl-rich-text table td, .fl-rich-text table th, .fl-html table td, .fl-html table th { min-width: 9em; } }