From the course: Creating a Responsive HTML Email
Unlock this course with a free trial
Join today to access over 22,500 courses taught by industry experts.
Stacking the callouts for small screens - HTML Tutorial
From the course: Creating a Responsive HTML Email
Stacking the callouts for small screens
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…
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
-
-
-
-