![]() ![]() The text is a bit large for this layout.Hit Cmd–V (Mac) or Ctrl–V (Windows) to paste.Select the Tablet artboard by clicking on its name at the top left of the artboard.Hit Cmd–C (Mac) or Ctrl–C (Windows) to copy it.Click on the NEW YORK CITY text to select it.Click on a blank area of the canvas to deselect both artboards. You should only see the two artboards.Zoom to the selection by hitting Cmd–3 (Mac) or Ctrl–3 (Windows).In the Layers panel, Shift–click on Desktop.Let’s copy over the elements from the Desktop artboard. In the Toolbar, choose the Select tool.NOTE: Our Phone artboard is 320px wide, the width of an iPhone SE. Main text columns would typically stretch across the entire grid (leaving some space on the left and right so they don’t touch the edge of the screen). Our template has 2 columns, but 3 or 4 columns could work for small items (such as icons, thumbnail images, etc.). You can’t fit 12 columns on a small phone like this. The content container is 720px wide.Ĭompare the Tablet and Phone artboards. NOTE: The Tablet artboard is designed for a screen size of 768px. ![]() We’re using this file just in case you played around with your design and did something different.Ĭomparing the Desktop and Tablet artboards, notice that the aqua content columns are narrower in the tablet size, but the gutters (space between columns) are the same width. NOTE: This file should look like the one you worked on in the previous exercise. Navigate into Desktop > Class Files > Adobe XD Class > NYC and double–click on About Page - Ready for Tablet & Phone.xd to open it. In Adobe XD, go to File > Open from Your Computer or hit Cmd–Shift–O (Mac) or Ctrl–Shift–O (Windows).Comparing Bootstrap’s Grid Across Screen Sizes In this exercise, you’ll learn how to modify a desktop-sized design for smaller screens, such as tablets and mobile phones. Topics covered in this Adobe XD tutorial:ĭesigning with Bootstrap’s grid, Adapting the design for tablets, Adapting the design for mobile phones Exercise Preview During the course, you will get access to the accompanying class files, live instructor demonstrations, and hands-on instruction. Note: These materials are provided to give prospective students a sense of how we structure our class exercises and supplementary materials. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |