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. User Avatar
    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. User Avatar
    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. User Avatar
    Gasha
    Permalink to comment#

    I can’t download video file

    • User Avatar
      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.

    • User Avatar
      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.

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag