Vi börjar med att leka med vår blogginläggsmodul och fiska med avstånd. Vi lägger också till den lilla färgade rutan längst upp till vänster i modulen, en visuell betydelse för vilken typ av innehåll det är.
Nästa förändring vi gör är att minska några av de yttre luckorna vid smalare skärmstorlekar. På breda skärmar är innehållet 80% brett (10% breddkanter) men det känns bättre att gå mer som 90% på mindre skärmar (5% breddkanter).
Vi lägger till en liten övergång för när den mediefrågan träffar, vilket kan vara ett riktigt roligt designer-y-trick. Jag gillar det i den här videon, men så småningom fick detta drag från designen. Det kan bli hackigt när det finns mycket mer innehåll på sidan och ganska distraherande.
Vi ändrar vårt system för att ha en brytpunkt i minsta storlek. Det är super enkelt, vi slutar bara att sväva kolumnerna och göra dem width: 100%;Yay för att inte tänka över nät! Vi kämpar med några specificitetsproblem på vägen.
Vi öppnar den riktiga iOS-simulatorn för att kolla in nätet som fungerar på en “riktig” mobil enhet. Vi kämpar lite med att hitta rätt metatagg, men i slutändan hakar vi rätt på CSS-Tricks.com. Det fungerar! Men naturligtvis har vi några positioneringsfrågor som vi behöver träna. För posten är den metataggen:
Vi tinkar tinker tinker med avstånd och storlek tills saker ser bra ut. Sakerna ser ganska snygga ut i slutet!
