В този екран ще разгледаме раздела "Сделки". Разделът "Сделки" по същество е "стена от реклами". Това е област от сайта, в която хората би трябвало да се ориентират сами, така че не се притеснявам от заглушаване на рекламите в мислите на хората. Също така, всяка реклама има отстъпка от нея и е продукт, който аз лично препоръчвам, така че няма сенчестост.
Вече имаме заглавката на място. Вече разполагаме със съдържанието, което се изплюва на страницата, което трябва да оформим. Това е идеалното място да започнете да пишете CSS.
Това, което е страхотно за тази страница, е, че можем да потопим пръстите си в света на адаптивната реклама. Рекламният свят наистина не е наваксал отзивчивия дизайн. Рекламите често са с фиксиран размер и преоразмеряването им е трудно или направо забранено. Това не е така на този сайт, защото аз създавам рекламите сам.
Всяка реклама се създава от фоново изображение, изображение на лого и битове текст. Използвайки background-imageсредство, можем да изрежем краищата му и това е добре. Не губим текст или важни части от логото.
Оформлението на тази „стена“ ще бъде като стена =). Ще имаме три колони с широки размери на работния плот и след това ще слезем до две колони и след това накрая една колона с телефонни размери. Всичко, което правим, е да плаваме рекламите и да прилагаме a, min-heightза да ги запазим на еднаква височина. При различни медийни заявки ние просто коригираме ширината на рекламите и променяме кои от тях имат десен марж и кои нямат (чрез :nth-child).
На гърба всяка реклама е персонализирано поле в WordPress. Когато ги изведем на страницата, първо ги заявяваме и ги поставяме в масив. След това разбъркайте този масив. След това най-накрая ги ехо. Може също така да даде на всички честен опит да бъде най-добрата реклама!