#128: Styling the Deals Page

(Updated on )

In this screencast we’ll dig into the Deals section. The Deals section is essentially a “wall of ads”. It’s an area of the site that people would have to navigate to themselves, so I’m not worried about jamming ads down peoples thoughts. Also, each ad has a discount on it and is product that I personally recommend, so no shady-ness going on.

We already have the header in place. We also already have the content being spit out onto the page that we need to style. This is the perfect place to be to launch right into writing some CSS.

What’s cool about this page is that we can dip our toes into the world of responsive advertising. The advertising world really hasn’t caught up with responsive design. Ads are often of fixed size and resizing them is difficult or straight up forbidden. That’s not the case on this site because I create the ads myself.

Each ad is created from a background image, a logo image, and bits of text. Using a background-image means we can kinda crop the edges of it and that’s OK. We don’t lose any text or important parts of the logo.

The layout of this “wall” will be wall-like =). We’ll have it be three columns at wide desktop sizes and then go down to two columns and then finally a single column at phone-ish sizes. All we do is float the ads and apply a min-height to keep them all the same height. At different media queries, we simply adjust the widths of the ads and change which of them have right margin and which do not (via :nth-child).

On the back end, each ad is a custom field in WordPress. When we output them onto the page we first query for them and put them into an array. Then shuffle that array. Then finally echo them out. Might as well give everyone a fair shot at being the top ad!