Join Paul Trani for an in-depth discussion in this video Adjusting content for different screen sizes, part of Dreamweaver CC 2013 New Features.
When you create a page and element using the new fluid grid layout you really have …control over those elements across different screen sizes allowing your …content to be responsive to the screen size that it's on. …In this case, I have some fluid grid divs. …And notice as I select Desktop, we can see everything that stretches across, …tablet and then mobile. So I can start to manipulate these divs …based on this screen size. So, I can take this promo down to about 3 …columns wide. Just like that.…
And if I want to add additional promos, I can just duplicate this div. …And if I want to move it next to that promo, I can move it up a row, just like that. …In fact, let's duplicate this two more times. …You can see I have four promos in this layout for my desktop. …If I select Tablet size, you can see I now have control over this layout as well. …So I can have each promo maybe it'd be about two columns wide just like that. …So I'll take them down, maybe move this up a row just like I was doing before.…
Note: Adobe Creative Cloud is updated on a regular basis. We will add more tutorials as features are added or changed, so check back often.
- Getting used to the new interface
- Syncing your settings
- Implementing media queries with CSS Designer
- Working with the Fluid Grid layout updates
- Adding HTML5 audio and video