Join Chris Converse for an in-depth discussion in this video Stacking the callouts for small screens, part of Creating a Responsive HTML Email.
Now we're going to adjust the layout for the callouts on small screens.…So inside of our CSS, inside of the media…query for 510, our small screen, let's hit a return.…Let's come in here and target the callouts.…So let's start with td.callout space We're going to…set padding, 20 pixels on the top, 30 on the right, zero on the bottom, and…30 on the left. And set the important flag.…
Next, we'll target the tables inside, td.callout space…table, we're going to set it width of 100%.…And the important flag.…Then we're going to set margin bottom to 20 pixels.…Next, we're going to do td.callout space table space td.…We're going to set padding of zero on the top, zero on the right.…10 pixels on the bottom, and 50 pixels on the left.…
Set an important flag on that.…Then we're going to set a background size.…We're going to size the icons a little bit smaller.…We're going to do 50 pixels on the x, and 50 pixels on the y.…Set an important flag there.…Then we are going to set a minimum height of 60 pixels.…Then we are going to do td.callout…
This course was created and produced by Chris Converse. We are honored to host this content in our library.
- Creating the graphics
- Setting up the base layout structure
- Styling the table rows for the headline, banner, etc.
- Creating buttons
- Adding CSS media queries
- Styling the content
- Incorporating animation and web fonts
- Validating your code
- Testing in various email clients
Skill Level Beginner
Q: What are the sizes of the images used in this course?
Q: This course was updated on 11/26/2013. What changed?
A: We added two new movies to Chapter 5, "Adding HTML5 video into HTML email" and "Encoding and embedding base64 images."
Q: This course was updated on 12/03/2014. What changed?
A: We added one bonus movie, "Using high-definition graphics in your HTML email."