Search code examples
csszurb-ink

How to make Zurb emails *un*responsive


I have a project that uses Zurb ink for many things, but one email in particular is an invoice, whose tables I don't want to shift around when I'm on a smaller screen (I'd rather scroll).

Is there an easy way to disable wrapping?


Solution

  • Because of the way css works (cascading style sheets) you'll need to override the inline styles and the wrapping with a few !important lines in a media query at the top of your mail in the style tag.

    For example:

    @media only screen and (max-width: 480px){
     td .example { width: 100% !important };
    }
    

    Or if you're using Inky only use the attribute large on your <columns> tag. Consequently, the small attribute will copy the value of the large attribute.