Menu
Each of the tables with 49% width can fit side by side when on desktop view. 49% is us instead of 50% because outlook can be very picky about what fits side-by-side and what doesnt. You can make 50% width fit if you set all of your styles just right no border, padding, etc. You can make a three-column section using similar code, but use three tables set to 32% width instead. When the responsive code kicks in, well want to make these content blocks 100% width for phones so that they fill the whole screen. This can be accomplish for most phones with a single mia querymia only screen and max-width: 414px . Devicewidth width:280px! Important; padding.
Center text-align: center! Important; you can continue to add mia queries with special styles to cover as many different screen sizes as youd like. You should also add code to your mia queries to optimize font-size and line-height for each screen size, improving readability for your subscribers. If youd like to start working with a template like this, grab our emailology template from our resources section, where you get free access to all of our b2b email list resources like templates, white papers, webinars and client tips & tricks. Other mia queries you can do a few other interesting things with mia queries. The below uses are most relevant to email, but check out mdn for even more mia query techniques. Orientation you can use the following mia query to target device orientation.
Unfortunately, this query doesnt work well in ios mail. In most versions, the landscape mia query will always trigger regardless of orientationmia screen and orientation: landscape targeting yahoo! Mail you can use BTC Database US this simple query to write styles that will trigger only in yahoo! Mail. This can be us to address layout or rendering issues that you see only in that email client, or to include messages intend only for yahoo! Users. mia yahoo pixel-density this mia query can be us to target only devices that have a certain pixel density.