CSS-fusklapp för Himmelsby (Avada)

Samlade tips om responsiv typografi, avstånd och Avada-knep.

1. clamp() – mått som anpassar sig efter skärmen

clamp(MINSTA, ÖNSKAT, STÖRSTA)

• MINSTA – mindre än så blir det aldrig (golv)
• ÖNSKAT – det flexibla värdet, oftast i vw
• STÖRSTA – större än så blir det aldrig (tak)

Webbläsaren räknar ut det önskade värdet och “klämmer” det mellan golv och tak.

Vad är vw?

1vw = 1 % av skärmens bredd.

Utan tak blir texten alldeles för stor på datorn. Därför behövs clamp().

Räkna ut mittvärdet

önskad storlek i mobilen ÷ 375 × 100 = vw-värdet

Exempel: 34px i mobilen → 34 ÷ 375 × 100 ≈ 9vw. Taket sätts till samma storlek som du vill ha på dator.

Bra att tänka på

• Använd det för rubriker, luft och avstånd. Brödtext behöver sällan variera mycket.
• Text under 16px blir svårläst i mobilen. Sidopadding under 16px känns trångt.
• Testa genom att dra ihop webbläsarfönstret sakta.
• Ett block med clamp() klarar alla skärmar, så du slipper separata block för mobil och dator.
• em skalar inte med skärmen, bara med textstorleken. Använd clamp() med vw i stället.

2. Typografisk trappa

Tumregel: varje nivå ska vara tydligt större än nästa, både i mobil och på dator.

3. line-height – radavstånd

Avståndet mellan raderna inuti samma text.

<h3 style="line-height: 1.45;">Din text här</h3>

• Skriv värden utan enhet (1.45, inte 24px). Då följer radavståndet med när texten skalar.
• Ju större text, desto tätare radavstånd.

4. margin – luft utanför elementet

Skrivsätt

margin: 20px;              /* alla fyra sidor */
margin: 20px 0;            /* upp och ner, vänster och höger */
margin: 0 0 14px 0;        /* upp, höger, ner, vänster (medurs från klockan tolv) */
margin-bottom: 14px;       /* en sida i taget */

Vanliga knep

Centrera ett block (kräver bredd eller max-bredd):

max-width: 1050px;
margin: 0 auto;

Ta bort temats standardluft:

margin: 0;

Luft som skalar:

margin-bottom: clamp(10px, 3vw, 24px);

Bra att veta

Två margins under varandra läggs inte ihop. Den största vinner. 20px under rubriken + 10px över stycket = 20px, inte 30px. Enklast: sätt bara margin i en riktning, till exempel alltid margin-bottom.

5. padding – luft innanför elementet

padding: 15px clamp(16px, 8vw, 120px) 30px;

= 15px upp, 16–120px på sidorna, 30px ner.

margin eller padding?

Tänk en tavla på en vägg: padding är passepartouten, margin är avståndet till nästa tavla.

6. Färdiga exempel från sajten

Hero-rubrik (skriv allt på en rad, se punkt 8):

<h1 style="color: #ffffff; font-size: clamp(30px, 9vw, 66px); line-height: 1.05; font-weight: normal; text-transform: uppercase; margin: 0 0 14px; text-align: left;"><span style="color: #ffffff;">MAXIMERA DITT</span><br><strong style="color: #bc9c50;">FRISKVÅRDSBIDRAG</strong></h1>

Hero-ingress:

<h3 style="color: #ffffff; font-size: clamp(17px, 4.5vw, 22px); line-height: 1.45; margin: 0; text-align: left;">Din ingress här.</h3>

Textruta med luft som skalar:

<div style="max-width: 1050px; margin: 0 auto; padding: 15px clamp(16px, 8vw, 120px) 30px;">

Himmelsbys färger:

• Guld: #bc9c50
• Mörkt guld: #987833
• Brun text: #5b5147
• Mörk bakgrund: #272722
• Ljus beige: #faf7f0

7. Numrerade listor – ol

Enkel lista med inline-stil

<ol style="margin: 0 0 20px; padding-left: 1.4em; font-size: clamp(16px, 4.5vw, 18px); line-height: 1.6;"><li style="margin-bottom: 8px;">Välj din friskvårdsleverantör.</li><li style="margin-bottom: 8px;">Öppna bokningslistan.</li><li>Boka önskad dag och tid.</li></ol>

• padding-left styr hur långt in texten börjar. Siffrorna hamnar i den luften. 1.4em räcker för 1–9, använd 1.8em om listan går över 9.
• margin-bottom på li ger luft mellan punkterna.
• Skriv hela listan på en rad, annars kan WordPress lägga in egna <br>.

Guldfärgade siffror

Siffrornas färg går inte att sätta inline. Lägg en <style> i samma kodblock och ge listan en klass:

<style>
.hby-lista li::marker {
    color: #bc9c50;
    font-weight: 700;
}
</style>

<ol class="hby-lista" style="padding-left: 1.4em; line-height: 1.6;"><li>Första steget</li><li>Andra steget</li><li>Tredje steget</li></ol>

Siffror i guldcirklar (stegmarkering)

Snyggt för “Så här bokar du”-steg:

<style>
.hby-steg {
    list-style: none;
    counter-reset: steg;
    margin: 0 0 24px;
    padding: 0;
}

.hby-steg li {
    counter-increment: steg;
    position: relative;
    margin: 0 0 clamp(12px, 3vw, 18px);
    padding-left: 48px;
    min-height: 34px;
    font-size: clamp(16px, 4.5vw, 18px);
    line-height: 1.55;
}

.hby-steg li::before {
    content: counter(steg);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #bc9c50;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}
</style>

<ol class="hby-steg"><li>Välj din friskvårdsleverantör.</li><li>Välj behandling eller aktivitet.</li><li>Boka dag och tid.</li></ol>

Andra sätt att numrera

<ol type="a">   <!-- a, b, c -->
<ol type="I">   <!-- I, II, III -->
<ol start="4">  <!-- börjar på 4 -->

ul – punktlista

Samma stilar fungerar för <ul> (punkter i stället för siffror). Byt bara ol mot ul. Guldpunkter:

.hby-lista li::marker { color: #bc9c50; }

8. Avada- och WordPress-fällor

WordPress lägger in egna <br> Radbrytningar i koden i ett textblock blir ofta <br>. Skriv korta element som rubriker på en rad.

Avadas responsiva typografi skriver över din storlek Ta bort klassen fusion-responsive-typography-calculated och attributen data-fontsize och data-lineheight om du sätter egen storlek med clamp().

Avada skriver om ankarlänkar En länk till #hby-epassi från en annan sida blir #_hby-epassi i adressfältet. Skript som läser ankaret måste tåla understrecket.

Ankare högst upp på en sida Ge den översta containern ett CSS ID (till exempel oversikt) och länka till /sida/#oversikt. Då scrollar sidan i stället för att laddas om.

Ankarnamn Utan #, utan å/ä/ö, utan mellanslag. Samma id får bara finnas en gång per sida.

Menyer i headern Headern ligger i Avada → Layouts → Menu. Den har separata menyelement för dator och mobil, och den svarta listen högst upp är ett eget element. Kontrollera vilket element du redigerar innan du byter meny.

Radera inte menyer på chans Menyer kan vara kopplade via headerlayouter, sidfötter och enskilda sidor, utan att det syns under Utseende → Menyer.

Töm cachen Efter ändringar i kod, menyer eller layouter.

Testa i privat fönster Avadas förhandsgranskning kör skript och ankarlänkar annorlunda än den publicerade sidan.

Felsök med konsolen F12 → fliken Console → ladda om sidan. Röda rader är fel.