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.
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!
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 :)
The phrase that helped me to remember link styling order was : Lord Vader Hates Furry Animals Link, Visited, Hover, Focus, Active.
I can’t download video file
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.
And feel free to write to [email protected] 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.