Help:Responsive web design: verschil tussen versies

Help:Responsive web design (bekijk bron)

Versie van 30 apr 2023 15:17

126 bytes verwijderd , 30 apr 2023

k

Aanpassingen voor verbeterde weergave op mobiele apparaten

VisueelWikitekst

Cierick Goos

4.504

bewerkingen

@@ Regel 20: / Regel 20: @@
 ==Titel en ondertitel==
-De titel en de ondertitel staan beide in een lettertype met schreef (serif), gelijk aan het lettertype dat voor heading 1 gebruikt wordt. Voor de titel wordt een font grootte (font-size) van 3em gebruikt en voor de ondertitel 2,1em. Ter vergelijk; heading 1 gebruikt een font grootte van 1,8em. Daarnaast staat de titel in vet (bold) en de ondertitel normaal.
+De titel en de ondertitel op de hoofdpagina staan beide in een lettertype met schreef (serif), gelijk aan het lettertype dat voor heading 1 gebruikt wordt. Voor de titel wordt een font grootte (font-size) van 3em gebruikt en voor de ondertitel 2,1em. Ter vergelijk; heading 1 gebruikt een font grootte van 1,8em. Daarnaast staat de titel in vet (bold) en de ondertitel normaal.
-Nu:
-<pre>
-<div style="font-size: 3em; font-family: 'Linux Libertine','Georgia','Times',serif; line-height: 1; font-weight: bold; text-align:center; border-style:none;">
-Welkom op Wouda's Wiki
-</div>
-<p style="font-size: 2.1em; font-family: 'Linux Libertine','Georgia','Times',serif; line-height: 1; font-weight: normal; text-align:center">
-De encyclopedie van het Woudagemaal
-</p>
-</pre>
+Oorspronkelijk:
+----
 <div style="font-size: 3em; font-family: 'Linux Libertine','Georgia','Times',serif; line-height: 1; font-weight: bold; text-align:center; ">
 Welkom op Wouda's Wiki
@@ Regel 38: / Regel 30: @@
 De encyclopedie van het Woudagemaal
 </p>
+----
+===Oplossing===
+Gebruik van classes voor de opmaak van de titel en de ondertitel. In common.ccs opmaak van de classen voor de desktop versie en in mobile.css voor de mobiele versie.
+----
+<p class=titel style="margin: 10px 0px 5px 0px; line-height: 1.2;">Welkom op Wouda's Wiki</p>
+<p class=ondertitel style="margin: 5px 0px 10px 0px; line-height: 1.2;">De encyclopedie van het Woudagemaal</p>
+----
 <p class=titel>Welkom op Wouda's Wiki</p>
 <p class=ondertitel>De encyclopedie van het Woudagemaal</p>
+----
-===Oplossing===
-Gebruik van classes voor de opmaak van de titel en de ondertitel. In common.ccs opmaak van de classen voor de desktop versie en in mobile.css voor de mobiele versie.
 <br>
 [[Category:Help]]