Responsive overskrifter i Elementor med clamp

Forfatter: Michael Bredahl · Læsetid: 5 min
Redigeret: 20.09.2026

Responsive overskrifter i Elementor med clamp

Store overskrifter ser godt ud på en stor skærm. Lige indtil du åbner siden på mobilen, og overskriften pludselig fylder fire linjer og halvdelen af skærmen.

Du kan selvfølgelig lave forskellige skriftstørrelser til desktop, tablet og mobil i Elementor. Det virker. Men der er en mere flydende løsning: CSS clamp().

Med clamp() kan skriftstørrelsen automatisk vokse og falde sammen med skærmbredden – inden for de grænser, du selv bestemmer.

Jeg har derfor lavet en lille, meget simpel, CLAMP-generator, som regner CSS’en ud for dig. Der er kun de vigtigste funktioner, ikke al det andet hejs som andre generatorer bare forvirrer dig med 😎

Responsive overskrifter i Elementor med Clamp

Clamp Generator

Bredde
Størrelse
Mobil
Desktop

Sådan bruger du clamp() i Elementor

Classic widgets

I Elementors classic widgets går du til fanen Style øverst.’

  • Klik på blyant ud for Typography
  • Klik på ikonet ud for Size
  • Vælg blyant nederst
  • Indsæt formlen fra Clamp generatoren i feltet (vist nederst)

Classic Elementor - Clamp Generator

Atomic widgets

I Elementors nyere stylingfunktioner kan du bruge CSS-funktioner, her vælger du fanen Style øverst

  • Klik på Typography for at folde den ud
  • Klik på PX i feltet Font size
  • Vælg Fx (den nederste)
  • Indsæt formlen fra Clamp generatoren i feltet (nederst)

Atomic Elementor - Clamp generator 

I stedet for kun at indtaste:

70px

bruger du den genererede værdi:

clamp(2rem, calc(0.957rem + 4.634vw), 4.375rem)

Overskriften vil nu være cirka 32 px på en 360 px bred skærm og vokse gradvist, indtil den rammer 70 px ved 1180 px.

På skærme større end det bliver den ved med at være 70 px.

På mindre skærme bliver den ikke mindre end 32 px.

Det er netop pointen med clamp().

Hvad er CSS clamp()?

clamp() gør det muligt at definere tre værdier:

font-size: clamp(minimum, flydende størrelse, maksimum);

Det betyder i praksis:

  • teksten bliver aldrig mindre end minimum

  • teksten ændrer størrelse flydende mellem mobil og desktop

  • teksten bliver aldrig større end maksimum

I stedet for eksempelvis at sige:

Mobil: 32 px
Tablet: 48 px
Desktop: 70 px

kan browseren selv beregne alle størrelserne derimellem.

Det giver en mere naturlig skalering.

Problemet er bare regnestykket

Selve clamp()-funktionen er ikke specielt kompliceret.

Det lidt mindre charmerende er at beregne den flydende værdi i midten.

Hvis en overskrift eksempelvis skal være:

32 px ved 360 px skærmbredde

og

70 px ved 1180 px skærmbredde

skal der beregnes en lineær skalering mellem de to punkter.

Det kan selvfølgelig regnes ud manuelt.

Men det er også den slags opgave, hvor en beregner er væsentligt sjovere end en lommeregner.

Brug min CLAMP-generator

I generatoren indtaster du fire værdier:

Mobil bredde
Den skærmbredde, hvor minimumsstørrelsen skal gælde.

Mobil størrelse
Den mindste ønskede skriftstørrelse.

Desktop bredde
Den skærmbredde, hvor maksimumsstørrelsen skal være nået.

Desktop størrelse
Den største ønskede skriftstørrelse.

Tryk derefter på Generer, og værktøjet laver den færdige clamp()-værdi.

For eksemplet med 32 px ved 360 px og 70 px ved 1180 px bliver resultatet omtrent:

font-size: clamp(2rem, calc(0.957rem + 4.634vw), 4.375rem);

Du behøver heldigvis ikke forstå decimalerne for at bruge dem.

Hvorfor bruge clamp() til Elementor-overskrifter?

Den største fordel er ikke, at du slipper for nogle få responsive indstillinger.

Det er, at typografien bliver flydende.

Med traditionelle breakpoints kan størrelsen eksempelvis hoppe sådan:

Mobil:   32 px
Tablet:  48 px
Desktop: 70 px

Det betyder, at to skærme med næsten samme bredde i nogle tilfælde kan få ret forskellige skriftstørrelser, fordi de befinder sig på hver sin side af et breakpoint.

Med clamp() sker ændringen løbende:

360 px → 32 px
500 px → ca. 38 px
700 px → ca. 48 px
900 px → ca. 57 px
1180 px → 70 px

Det giver typisk en mere harmonisk typografi.

Clamp() er ikke kun til H1-overskrifter

Samme princip kan bruges til stort set alle størrelser i CSS.

For eksempel:

font-size
padding
margin
gap
width

Så når først man begynder at bruge clamp(), er der en vis risiko for, at det breder sig.

Det er set før.

Til typografi er det især oplagt til:

  • H1-overskrifter

  • H2-overskrifter

  • hero-tekster

  • store statements

  • intro-tekster

  • knaptekster og labels

Brødtekst kan også skaleres flydende, men her bør forskellen mellem minimum og maksimum normalt være betydeligt mindre.

Lad være med bare at gøre overskriften enorm

At clamp() kan få en H1 til at vokse fra 32 til 100 pixels betyder ikke nødvendigvis, at den bør gøre det.

Typografien skal stadig passe til:

  • tekstens længde

  • containerens bredde

  • skrifttypen

  • linjehøjden

  • layoutet omkring overskriften

En kort overskrift som:

Online marketing

kan tåle en væsentligt større font end:

Online marketing, hjemmesider og teknisk rådgivning til virksomheder

Så brug generatoren til beregningen – ikke til at afskaffe den sunde fornuft.

Et godt udgangspunkt

Der findes ikke én rigtig størrelse, men til en stor hero-overskrift kunne et udgangspunkt eksempelvis være:

Mobilbredde:     360 px
Mobilstørrelse:   32 px

Desktopbredde:  1180 px
Desktopstørrelse: 70 px

Til en almindelig H2 kunne spændet være mindre, eksempelvis 26 til 42 px.

Det vigtigste er, at du vælger den størrelse, der fungerer på den mindste skærm, den størrelse der fungerer på desktop – og lader clamp() klare området imellem.

Prøv CLAMP-generatoren

Hvis du arbejder med Elementor og gerne vil have responsive overskrifter uden at sidde og beregne CSS-formler manuelt, kan du bruge min CLAMP-generator.

Indtast bredde og fontstørrelse for mobil og desktop, tryk Generer, og kopier resultatet direkte ind i Elementor.

Det er et meget lille værktøj.

Men nogle gange er de bedste værktøjer dem, der fjerner én irriterende beregning, man ellers skulle lave igen og igen.