En este screencast profundizaremos en la sección de Ofertas. La sección de ofertas es esencialmente un "muro de anuncios". Es un área del sitio en la que las personas tendrían que navegar por sí mismas, por lo que no me preocupa bloquear los anuncios en los pensamientos de las personas. Además, cada anuncio tiene un descuento y es un producto que recomiendo personalmente, por lo que no hay dudas.
Ya tenemos el encabezado en su lugar. También ya tenemos el contenido que se está escupiendo en la página que necesitamos diseñar. Este es el lugar perfecto para empezar a escribir CSS.
Lo bueno de esta página es que podemos sumergirnos en el mundo de la publicidad receptiva. El mundo de la publicidad realmente no se ha puesto al día con el diseño receptivo. Los anuncios suelen tener un tamaño fijo y cambiar su tamaño es difícil o está prohibido. Ese no es el caso en este sitio porque yo mismo creo los anuncios.
Cada anuncio se crea a partir de una imagen de fondo, una imagen de logotipo y fragmentos de texto. Usando un background-imagemedio, podemos recortar un poco los bordes y eso está bien. No perdemos ningún texto o partes importantes del logo.
El diseño de este "muro" será similar a un muro =). Haremos que sean tres columnas en tamaños de escritorio anchos y luego bajemos a dos columnas y finalmente a una sola columna en tamaños de teléfono. Todo lo que hacemos es hacer flotar los anuncios y aplicar un min-heightpara mantenerlos a la misma altura. En diferentes consultas de medios, simplemente ajustamos los anchos de los anuncios y cambiamos cuáles tienen margen derecho y cuáles no (vía :nth-child).
En el back-end, cada anuncio es un campo personalizado en WordPress. Cuando los mostramos en la página, primero los consultamos y los colocamos en una matriz. Luego baraja esa matriz. Luego, finalmente, repítelos. ¡También podría darles a todos una oportunidad justa de ser el anuncio principal!