As we have done in previous exercises, let’s add some padding to the table cell that contains the footer table. Let’s add some space between the footer, the red border above it, and the bottom of the page. The desktop footer layout looks pretty good, but there are a few details we still need to style. Save date-night-exclusive-picks.html and reload the browser. Close social-buttons.html and return to date-night-exclusive-picks.html.Around line 172, fill in the last td with the Instagram icon from social-buttons.Around line 166, fill in the 5th td with the Twitter icon from social-buttons.Repeat this process to fill in the remaining odd table cells with social buttons: To display the social icons larger on mobile, we’ll add a media query. Notice that the image has a set width and height that matches the space allotted to it on the desktop.
#Footer symbols in responsive site designer code#
Switch back to date-night-exclusive-picks.html and around line 160, in the 3rd table cell, delete the non-breaking space and paste the code as shown below: In your code editor, open social-buttons.html from 2-Column Layout > snippets. We prepared a file with the URLs for our 3 social buttons. Give that first table cell followCell class so we can target it with CSS: In the first table cell, around line 154 replace the non-breaking space with the following paragraph: Return to the browser and reload the page.Īs shown below, we have a nice wireframe for our footer:
In the first table cell, delete the width (so it’s size will be calculated as whatever space is left over). On the desktop, our design calls for each to be 30 x 30 pixels, so let’s set that next.Ĭhange the width to 30 (remove %) for the 3rd, 5th, and 7th tds, as shown below: įor the even tds, change the width to 5 (remove %), as shown below: Our images are the Retina size (also known as high-res or 2x) of 88 x 88 pixels so we’ll make them 44 pixels in code for the mobile layout. The graphics inside that area don’t have to be that size, as long as there’s space around them to make the touchable area large enough. Obviously, we can’t use a width of 100% for all the table cells.Īpple recommends that tappable areas be at least 44 x 44 pixels. As shown below, paste each copy on a new line, making it easier to see each cell: Ĥ Identical TD Tags Omitted To Save Space Paste the code 6 times, so you have a total of 7 table cells. Copy the 3 lines of td code shown above from (from around lines 153–155). Next we need to add the remaining table cells to hold the footer content. Give it a footer class, as shown in bold below: Īround line 154, add a non-breaking space to the table cell, as shown in bold: We’ll need to target this table and its contents with some styles. The table has a temporary 1-pixel border so we can see the structure as we work. You should be back in date-night-exclusive-picks.html.Īround line 151, paste the code into the new table cell, as shown below in bold: Switch back to table-code.html.Ĭlose the file. The next step is to add the table that will hold our 7 footer elements. Near the end of the body, below the last, paste the code as shown in bold:
Switch back to date-night-exclusive-picks.html.
In your code editor, open table-code.html from 2-Column Layout > snippets.Ĭopy the code from the opening tr to the closing tr tag (around lines 2–6). Let’s grab the code for the table cell that will hold the 7 nested tables. Inside that, we’ll nest a table with 7 columns (one for each element and the spaces between them).
To gain the most control, we will add a new table row to our wrapper table. It’s tempting to combine everything into one table cell that’s right-aligned. Our email looks pretty close to the finished design, but we need to add a footer with FOLLOW US and the social media icons. Navigate to Desktop > Class Files > yourname-Responsive Email Class.ĭouble–click on 2-Column Email Design Mockup.pdf. Let’s look at the mockup again to compare our work so far with the finished design. We’ll keep reloading this file, so leave it open. Preview date-night-exclusive-picks.html in a browser (we recommend Google Chrome because we’ll be using its DevTools later). (Open the entire folder if your code editor allows.) In your code editor open date-night-exclusive-picks.html from the 2-Column Layout folder if it isn’t already open.
0 kommentar(er)
