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

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…

Contents