The ad we have in place is great for large/desktop size screens, but it starts to fail pretty quickly on smaller screens.

We have some breakpoints already in use in this design, but where this design starts to break doesn't match up with those existing breakpoints. No problem, we can easily make one-off breakpoints just for this.

We make some choices about what can be hidden in the ad when we have less available room. We start by removing the tree graphic and going with just some text. We even use some spans in the text to re-use words in sentences we already have (hide some words, leave others). At the smallest size we bring just the tree back alone.

This particular design will likely change, and then change again and again. That's the nature of advertising: keeping the people paying for the ad happy while keeping your design integrity.

Comments

  1. Amrit
    Permalink to comment#

    Hi Chris

    Just seen the advert on this live site, and can see it has changed slightly since you made this video.

    Looks much better! Just a personal suggestion though, when you resize down to the second smallest stage, the caption is fluid and drops down to three lines just before displaying the logo on it’s own. This breaks the space underneath it which I think it needs.

    I played around with it on firebug, added a width of 165px to “.top-treehouse-ad h5”, which keeps the caption fixed at 2 lines, and feel it looks a bit more uniform. Just an idea!

  2. Alan Fall
    Permalink to comment#

    Too much trouble(and code) for a responsive banner..i don’t really know if it’s worth it Chris..i’m glad you threw it away :)

  3. Gasha
    Permalink to comment#

    I can’t download video file

    • Chris Coyier
      Permalink to comment#

      Perhaps try refreshing the page before clicking the download button? The links expire with time (how long the page has been open). I just tested this one and seemed working for me.

    • Chris Coyier
      Permalink to comment#

      And feel free to write to team@css-tricks.com if it’s still a problem. That way you’re sure to get a response that you can see, versus having to check here.

      I’m going to bury this thread, since it’s a technical issue not directly about this content.

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 triple backtick fences like this:

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

We have a pretty good* newsletter.