U ovom screencast-u istražit ćemo odjeljak Ponude. Odjeljak "Ponude" u osnovi je "zid oglasa". To je područje web mjesta na kojem bi ljudi morali sami navigirati, tako da me ne brine ometanje oglasa u mislima ljudi. Također, svaki oglas ima popust na njega i proizvod je koji osobno preporučujem, tako da se ne događa nikakva sjenovitost.
Zaglavlje već imamo na mjestu. Također već imamo sadržaj koji se ispljuva na stranicu koju trebamo oblikovati. Ovo je savršeno mjesto za pokretanje izravnog pisanja CSS-a.
Ono što je super na ovoj stranici je to što možemo uroniti prste u svijet responzivnog oglašavanja. Svijet oglašavanja doista nije sustigao responzivni dizajn. Oglasi su često fiksne veličine i njihovo je mijenjanje teško ili je zabranjeno izravno. Na ovoj stranici to nije slučaj jer oglase izrađujem sam.
Svaki je oglas izrađen od pozadinske slike, slike logotipa i dijelova teksta. Pomoću background-imagesredstava možemo nekako obrezati njegove rubove i to je u redu. Ne gubimo tekst ili važne dijelove logotipa.
Izgled ovog "zida" bit će poput zida =). To će biti tri stupca u širokim veličinama radne površine, a zatim se spustiti na dva stupca i na kraju jedan stupac u telefonskim veličinama. Sve što radimo je da plutamo po oglasima i primijenimo znak min-heightda zadrže istu visinu. U različitim medijskim upitima jednostavno prilagođavamo širinu oglasa i mijenjamo koji od njih imaju pravu marginu, a koji nemaju (putem :nth-child).
Sa stražnje strane, svaki je oglas prilagođeno polje u WordPressu. Kada ih izbacimo na stranicu, prvo ih upitamo i stavimo u niz. Zatim promiješajte taj niz. Zatim ih napokon odjeknite. Mogli biste svima pružiti poštenu priliku da postanu najbolji oglas!