From the course: Creating a Responsive HTML Email
Unlock this course with a free trial
Join today to access over 22,400 courses taught by industry experts.
Styling the content and footer for smaller screens - HTML Tutorial
From the course: Creating a Responsive HTML Email
Styling the content and footer for smaller screens
So now for the medium sized screens, we're going to modify the content row. Let's get our cursor inside of the max-width of 600 media query. So let's come in here and target the content row. So td.content, space. We're going to set padding-bottom at 30 pixels. Then set the important flag. Then we're going to do background image, we're going to specify images/banner_medium_ghost.jpg, then the important flag. Now we did specify the background image on that element, inside of an inline style, to specify the banner large ghost. So we do need to override that with an important tag. Next, we're going to target the call to action button. So we're going to do td.content table.button. We're going to set the width to auto. And then td.content table.button td a. We're going to set the font size to that anchor link to 14 pixels. Set the important tag on that as well. With those in place let us go down to the small screen rules. Let's hit Return. Let's come in here and target the content row…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
Adding CSS media queries to your HTML email4m 22s
-
Styling the headline and banner for smaller screens3m 14s
-
Styling the content and footer for smaller screens3m 4s
-
Styling the promos for smaller screens4m 45s
-
Rearranging the callouts for medium screens5m 35s
-
Stacking the callouts for small screens5m 29s
-
-
-
-