Jag valde att fortsätta utveckla Markdown-sidan emot en mer mobilvänlig variant.
Till att börja med så tog jag bort stora delar med CSS för att göra den mer mobilvänlig. Jag tog också och flyttade lite på bilden, och centrerade rubrikerna för att sidan ska se snyggare ut på mobilen. Sedan ska jag försöka att skala upp sidan bit för bit, som Powell rekommenderade.
Sidan fungerade bra att skala upp till ungefär width 550px där så började ”Cheet Sheet”:et bli för utdraget. Här lade jag min första breakpoint. Den låser ”Cheet Sheet”:ets bredd så att den inte kan växa mer. Jag lade också till så att hela tabellen blir centrerad under rubriken.
Nästa problem tyckte jag blev vid 700px bredd då markdown bilden blev väl stor. Jag tog och använde flexbox för att lägga bilden till höger om det första stycket.
Den sista media querien blev vid 900px där jag låser storleken på hela min <main> så att inte texten blir för stor och utragen. Jag lade även på den solida bordern på höger och vänster sida.
Jag testade även en ”clamp()” som Powell visade till <h1> rubriken så att även den blir större när skärmen växer. Den går dock aldrig över 32pt som är grund storleken.
Sidan i full storlek på min skärm:
Sidan på min telefon:
Sidan på Bing och Am I Responsive innan:
Sidan efter:
Jag måste säga att detta var en otroligt rolig uppgift att göra och jag blev faktiskt riktigt nöjd med resultatet. Speciellt när man kollar på ”Am I Responsive”.
Lämna ett svar