The top module in the main sidebar of the site belongs to Treehouse, as the main sponsor of CSS-Tricks. Based on a conversation I had with Ryan Carson, some of the best converting ads they have are the ones with people in them, so we pick out one of those to use for the graphic in the module.

When we stick the image in, it hangs outside the module and has way too much spacing around it. With our new SCSS file just for modules, we write in some new rules for how image ad modules behave (no padding, full-width images).

Once we finish up with that we start going off on a tangent making other tweaks specifically for the narrowest media query breakpoint.

Comments

  1. Joi
    Permalink to comment#

    This one should be the 46 screencast instead of 48 since what you do in this one is already done in 46 and 47 atm :)

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.