W tym screencastie zajmiemy się sekcją Oferty. Sekcja ofert to w zasadzie „ściana reklam”. Jest to obszar witryny, do którego ludzie musieliby przejść samodzielnie, więc nie martwię się o blokowanie reklam w myślach ludzi. Poza tym każda reklama ma na to rabat i jest produktem, który osobiście polecam, więc nie ma tu żadnych podejrzeń.
Mamy już nagłówek na miejscu. Mamy też już wypluwane treści na stronę, którą musimy nadać stylizacji. To idealne miejsce, aby od razu rozpocząć pisanie CSS.
Fajne na tej stronie jest to, że możemy zanurzyć się w świecie reklamy elastycznej. Świat reklamy naprawdę nie dogonił responsywnego projektowania. Reklamy często mają stały rozmiar, a zmiana ich rozmiaru jest trudna lub wręcz zabroniona. Tak nie jest w tej witrynie, ponieważ sam tworzę reklamy.
Każda reklama jest tworzona z obrazu tła, obrazu logo i fragmentów tekstu. Używając background-imageśrodków, możemy przyciąć jego krawędzie i to jest OK. Nie tracimy żadnego tekstu ani ważnych fragmentów logo.
Układ tej „ściany” będzie przypominał ścianę =). Będziemy mieć trzy kolumny dla szerokich rozmiarów komputerów stacjonarnych, a następnie zejść do dwóch kolumn, a na końcu jedną kolumnę w rozmiarach telefonu. Jedyne, co robimy, to unoszenie reklam i stosowanie znaku, min-heightaby wszystkie miały tę samą wysokość. Przy różnych zapytaniach o media po prostu dostosowujemy szerokość reklam i zmieniamy, które z nich mają właściwy margines, a które nie (przez :nth-child).
Z drugiej strony każda reklama jest niestandardowym polem w WordPress. Kiedy wypuszczamy je na stronę, najpierw wyszukujemy je i umieszczamy w tablicy. Następnie potasuj tę tablicę. W końcu powtórz je echem. Równie dobrze może dać każdemu uczciwe szanse na bycie najlepszą reklamą!