Billedet herover ser fint ud på de fleste computerskærme. Men på smartphone vil teksten være ulæselig og pelikanerne halshugges.

Kig på siden på både smartphone og computerskærn og du vil se, at øverste modul ser dårligt ud på smartphone, men er ok på computerskærm. Nederste modul fungerer ikke på computerskærm, men fint på en smartphone.

Løsningen er altså ikke at tro, at det responsive design præsenterer designet pænt på alle typer skærme. Nogle gange er du nødt til at lave ét modul, der kun vises på én type skærm og et modul, der kun vises på en anden.

Under “Avanceret” kan du vælge Synlighed – altså markere, om et afsnit, en række eller et modul skal deaktiveres på en eller flere skærmtyper.

Løsningen

Jeg har brugt samme baggrundsbillede, men lavet to afsnit med forskellige indstillinger.
Det ene vises kun på smartphone.
Det andet vises kun på tablet og computer.

Detaljeret opskrift

Det er ikke muligt at give en detaljeret og præcis opskrift på, hvilke indstilinger du i øvrigt skal bruge. Det afhænger nemlig af utallige ting – blandt andet disse:

• Hvilken størrelse har billedet
• Hvordan er motivet på billedet
• Hvilke farver er der i billedet

I mange tilfælde er du nødt til at prøve dig frem med utallige muligheder, før du rammer det rigtige. Jo mere erfaring du har, desto større er sandsynligheden for, at du rammer rigtigt i de første forsøg. Men selv øvede må ofte prøve mange muligheder af.

Er du begynder, kan det tage timers prøven sig frem at finde den kombination af billede, tekst og indstillinger, der passer sammen.