![\"\"](\"https:\/\/wp.als080717od.hemsida.eu\/wp-content\/uploads\/2026\/03\/E89D39F1-489F-49C7-B60E-B35641B97A3D-1024x583.png\")
<\/figure>\n\n\n\nProblemet \u00e4r texten blir v\u00e4ldigt liten och att hela sk\u00e4rmytan (viewport) inte anv\u00e4nds. Det blir sv\u00e5rt att l\u00e4sa p\u00e5 mindre enheter.<\/p>\n\n\n\n
Efter att ha uppdaterat sidan till att anv\u00e4nda en dynamisk viewport och relativa enheter (rem) p\u00e5 fonterna \u00e4r sidan mobilv\u00e4nlig.<\/p>\n\n\n\n Notera att jag fick \u00e4ndra fontstorleken till 1 rem (16 px) f\u00f6r att den skulle r\u00e4knas som mobilv\u00e4nlig. Det som har \u00e4ndrats \u00e4r detta:<\/p>\n\n\n\n min-height: 100dvh; Jag anv\u00e4nder ocks\u00e5 en media query:<\/p>\n\n\n\n @media (max-width: 600px) {<\/p>\n\n\n\n #mdimage {<\/p>\n\n\n\n max-width: 30%;<\/p>\n\n\n\n height: auto;<\/p>\n\n\n\n }<\/p>\n\n\n\n Detta g\u00f6r att bilden inte blir f\u00f6r stor. Jag fick ocks\u00e5 justera tabellen d\u00e5 den blev f\u00f6r bred. Detta gjorde jag med word-break: break-word; i table description (td).<\/p>\n\n\n\n H\u00e4r finns den validerade HTML och CSS koden:<\/p>\n\n\n\n <\/p>\n\n\n\n D\u00e4refter valde jag att g\u00f6ra om skogssidan med ramverket Materialize fr\u00e5n Google. Med Materialize finns det mycket f\u00e4rdigt f\u00f6r att anv\u00e4nda komponenter som vanligtvis anv\u00e4nds p\u00e5 en websida s\u00e5som nav, hero, footer bland annat. H\u00e4r anv\u00e4nds inline CSS, vilket betyder att vi inte anv\u00e4nder en separat fil f\u00f6r CSS. Vi kan ocks\u00e5 f\u00e5 mycket hj\u00e4lp genom att anv\u00e4nda klasser tillsammans med div.<\/p>\n\n\n\n F\u00f6rst beh\u00f6ver man l\u00e4nka till stylesheet, exempelvis <link rel=”stylesheet” href=”https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/materialize\/1.0.0\/css\/materialize.min.css”>.<\/p>\n\n\n\n Inom <style> i HTML-filen har jag satt olika f\u00e4rger som passar bra med skogstemat. Navigeringsbar och footer har samma f\u00e4rg. Sen har hero, delen under nav en ljusare gr\u00f6n f\u00e4rg. N\u00e4r det g\u00e4ller texten i navigeringsbar har jag anv\u00e4nt funktionen clamp f\u00f6r att s\u00e4tta en en minimistorlek, en optimal storlek och en maximal storlek. Detta f\u00f6rhindrar texten fr\u00e5n att radbryta som det gjorde p\u00e5 min f\u00f6rsta version. Detta g\u00f6rs med font-size: clamp(1rem, 4vw, 1.5rem); Jag anv\u00e4nder denna funktion p\u00e5 flera st\u00e4llen.<\/p>\n\n\n\n N\u00e4r det g\u00e4ller sj\u00e4lva uppbyggnaden av sidan s\u00e5 anv\u00e4nder man klasser, exempelvis <div class=”nav-wrapper container”> och <div class=”container” style=”margin-top: 2.5rem;”>. Varje rad \u00e4r sedan indelad i kolumner. Det \u00e4r 12 kolumner totalt och varje bild tar upp 4 kolumner. <\/p>\n\n\n\n F\u00f6rdelen med Materialize tycker jag \u00e4r att man f\u00e5r ganska mycket hj\u00e4lp med att bygga upp strukturen p\u00e5 webbsidan och att det blir l\u00e4ttare att hantera var saker ska placeras p\u00e5 sk\u00e4rmen.<\/p>\n\n\n\n H\u00e4r \u00e4r den validerade HTML koden:<\/p>\n\n\n\n Anv\u00e4nda relativa enheter Innan jag b\u00f6rjade arbeta med relativa enheter och dynamisk viewport s\u00e5 var Markdown sidan inte mobilv\u00e4nlig. Problemet \u00e4r texten blir v\u00e4ldigt liten och att hela sk\u00e4rmytan (viewport) inte anv\u00e4nds. Det blir sv\u00e5rt att l\u00e4sa p\u00e5 mindre enheter. Efter att ha uppdaterat sidan till att anv\u00e4nda en dynamisk viewport och relativa enheter (rem) […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-79","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/posts\/79","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/comments?post=79"}],"version-history":[{"count":3,"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/posts\/79\/revisions"}],"predecessor-version":[{"id":98,"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/posts\/79\/revisions\/98"}],"wp:attachment":[{"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/media?parent=79"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/categories?post=79"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/tags?post=79"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"\"](\"https:\/\/wp.als080717od.hemsida.eu\/wp-content\/uploads\/2026\/03\/03A38EF3-5E78-4C29-B8CD-599455C817BD-1024x527.png\")
<\/figure>\n\n\n\n
font-size: 2rem;<\/p>\n\n\n\n
<\/p>\n\n\n\n![\"\"](\"https:\/\/wp.als080717od.hemsida.eu\/wp-content\/uploads\/2026\/04\/C72180F6-112A-461E-B419-5CA2DC392ED7-1024x483.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/wp.als080717od.hemsida.eu\/wp-content\/uploads\/2026\/04\/F90F5B3D-7053-4A7B-9472-78094214ECD7-1024x208.png\")
<\/figure>\n\n\n\nAnv\u00e4nda ramverk<\/h2>\n\n\n\n
![\"\"](\"https:\/\/wp.als080717od.hemsida.eu\/wp-content\/uploads\/2026\/04\/D0155EF3-010F-4770-AD80-59057336ABD8.png\")
<\/figure>\n","protected":false},"excerpt":{"rendered":"