Join Chris Converse for an in-depth discussion in this video Styling the headline and banner for smaller screens, part of Creating a Responsive HTML Email.
Now we're going to target the headline row and…the banner row inside of the medium screen size.…So inside of the midi query for max width of…660, let's come in here and add some more rules.…So we're going to start by targeting the TD with the headline class, so…td.headline, add our brackets. We're going to set…a padding of top of five pixels, zero on the right, zero on the bottom, 30 on the…left, and then set the important flag since these are set on the…individual td element. Next we're going to do td.headline,…space h one. We're going to set the font size…to 28 pixels. Set the important flag on that as well.…
Next we are going to set td.banner image. We are going to turn…that off as well just like we did with the logo.…Display: none.…Next, we are going to do td.banner target the td.…We're going to set a width of 480 pixels. We're going to set a height…of 150 pixels then we're going to set a background, no color.…URL we're going to set to images slash baanner_medium.jpeg.…
Set no repeat.…Zero pixels on the x and zero pixels on the y.…
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."