Responsive

Als we het hebben over responsive dan gaat het over de opmaak op een pagina, afhankelijk van de grote van het scherm.

[well]
Een mobiel scherm heeft andere afmetingen dan een windows computer, en het kost extra werk om er voor te zorgen dat die op allebij goed te lezen is.
Gelukkig word dat een stuk makkelijker gemaakt door de responisve parameter en shortcode:

[responsive]…[/responsive] en ‘responsive=”true”‘

Hieronder vind je meer variaties op dit thema.
[/well]
[row][column sm=”9″ md=”6″]

De responsive shortcode maakt gebruik van vier afmetingen:

[/column]
[column sm=”9″ md=”6″]

• xs – extra small
• sm – small
• md – medium
• lg – large

[/column]
[/row]

Gebruik deze afmetingen met de onderstaande parameters:

[container]
[row] [column lg=”2″ sm=”2″ md=”2″]hidden[/column][column lg=”10″ sm=”10″ md=”10″]Dit blok is onzichtbaar bij bepaalde beeldformaten[/column] [/row]
[row] [column lg=”2″ sm=”2″ md=”2″]block[/column][column lg=”10″ sm=”10″ md=”10″]Dit blok is zichtbaar bij bepaalde beeldformaten[/column] [/row]
[row] [column lg=”2″ sm=”2″ md=”2″]inline[/column][column lg=”10″ sm=”10″ md=”10″]Dit blok word weergegeven als een<span> element bij bepaalde beeldformaten[/column] [/row]
[row] [column lg=”2″ sm=”2″ md=”2″]inline block[/column][column lg=”10″ sm=”10″ md=”10″]Dit blok word weergegeven als een <div> element bij bepaalde beeldformaten[/column] [/row]
[/container]

[well]
Gebruik bijvoorbeeld:

[responsive block=”lg”]…[/responsive]

Om een blok alleen maar zichtbaar te maken op een groot scherm.
[/well]

Je kunt responsive ook gebruiken als parameter in andere stukken shortcode, bijvoorbeeld in [img responsive=”true”]…[/img]
Hierdoor is het makkelijk om afbeeldingen, tabellen en dergelijken goed leesbaar te houden op mobiel en browser.

Ook kun je [responsive-embed]…[/responsive-embed] gebruiken voor ingevoegd materiaal.

Op de afbeelding hieronder ziet u welk formaat jouw scherm op dit moment heeft:
[responsive block=”xs”][/responsive]
[responsive block=”sm”][/responsive]
[responsive block=”md”][/responsive]
[responsive block=”lg”][/responsive]