Improve responsiveness/wrapping

[aricooperdavis]

The custom banner is laid out like so:

<div class="custom-banner-container"> <! invisible container -->
   <div class="custom-banner-body"> <! banner background -->
      <div class="custom-banner-content"></div> <! banner content -->
      <div class="custom-banner-actions"> <! invisible container -->
         <a class="button custom-banner-button"></a> <! action button -->
         <a class="button custom-banner-dismiss"></a> <! dismiss button -->
      </div>
   <div>
</div>

When...

• viewports are narrow and
• the browser doesn't support overflow-wrap: anywhere and
• the custom-banner-content cannot easily wrap (for example because it contains long compound german words)

...then the banner content can cause the buttons to overflow off the end of the custom-banner-body which looks ugly:

I'm no expert at responsive CSS, so if anyone fancies looking into this in more detail I'd be very grateful!

[yehudaclinton]

Also does not work well for mobile. I see one word per line