I denne screencast graver vi i afsnittet Tilbud. Sektionen Tilbud er i det væsentlige en "væg af annoncer". Det er et område på webstedet, som folk bliver nødt til at navigere til sig selv, så jeg er ikke bekymret for at blokere annoncer ned ad folks tanker. Hver annonce har også en rabat på den og er et produkt, som jeg personligt anbefaler, så der er ingen skygge.
Vi har allerede headeren på plads. Vi har også allerede spioneret indholdet på den side, som vi har brug for at style. Dette er det perfekte sted at være at starte lige ind i at skrive noget CSS.
Hvad der er sejt ved denne side er, at vi kan dyppe tæerne ned i en verden af responsiv reklame. Annonceringsverdenen har virkelig ikke fanget responsivt design. Annoncer har ofte en fast størrelse, og det er vanskeligt at ændre størrelsen på dem, eller det er direkte forbudt. Det er ikke tilfældet på dette websted, fordi jeg selv opretter annoncerne.
Hver annonce oprettes ud fra et baggrundsbillede, et logo billede og tekststykker. Ved hjælp af et background-imagemiddel kan vi lidt beskære kanterne af det, og det er OK. Vi mister ikke nogen tekst eller vigtige dele af logoet.
Layoutet for denne “væg” vil være væglignende =). Vi får det til at være tre kolonner i brede skrivebordsstørrelser og derefter gå ned til to kolonner og derefter endelig en enkelt kolonne i telefonstørrelser. Alt hvad vi gør er at flyde annoncerne og anvende en for min-heightat holde dem alle i samme højde. Ved forskellige medieforespørgsler justerer vi simpelthen bredden på annoncerne og ændrer, hvilke af dem der har højre margen, og hvilke der ikke har (via :nth-child).
På bagsiden er hver annonce et brugerdefineret felt i WordPress. Når vi sender dem ud på siden, spørger vi først efter dem og placerer dem i en matrix. Bland derefter arrayet. Så endelig ekko dem ud. Kan lige så godt give alle en god chance for at være den øverste annonce!