V tomto screencastu se ponoříme do sekce Nabídky. Sekce Nabídky je v podstatě „zeď reklam“. Je to oblast webu, kterou by lidé museli navigovat sami k sobě, takže si nedělám starosti s rušením reklam v myšlenkách lidí. Každá reklama má také slevu a je to produkt, který osobně doporučuji, takže se neděje žádná stinnost.
Záhlaví už máme na svém místě. Také již máme obsah vyplivnutý na stránku, který potřebujeme stylovat. Toto je ideální místo, kde můžete začít psát nějaké CSS.
Na této stránce je skvělé, že můžeme ponořit prsty do světa responzivní reklamy. Svět reklamy opravdu nedostihl responzivní design. Reklamy mají často pevnou velikost a jejich změna velikosti je obtížná nebo přímá zakázána. Na tomto webu tomu tak není, protože reklamy vytvářím sám.
Každá reklama je vytvořena z obrázku na pozadí, obrázku loga a kousků textu. Pomocí background-imageprostředků můžeme trochu oříznout jeho okraje a to je v pořádku. Neztrácíme žádný text ani důležité části loga.
Uspořádání této „zdi“ bude podobné zdi =). Budeme mít tři sloupce v širokých velikostech plochy a potom přejdeme do dvou sloupců a nakonec jeden sloupec v telefonních velikostech. Jediné, co děláme, je plavat reklamy a aplikovat a min-height, aby byly všechny stejné výšky. U různých mediálních dotazů jednoduše upravíme šířky reklam a změníme, které z nich mají pravý okraj a které ne (přes :nth-child).
Na zadní straně je každá reklama ve WordPressu vlastní pole. Když je vydáme na stránku, nejprve je vyhledáme a vložíme do pole. Pak toto pole zamíchejte. Pak je konečně ozvěte. Mohlo by to také dát každému férovou šanci být nejlepší reklamou!