There are 9 default sizing classes that can be added to the root class of the devices to scale it.
The number represents how much the device is scaled down based on it's original size. For example cd-scale-70
is 70% of the original device size.
You can also set the font-size on the device with a percentage to scale the device to any size that you want.
This example scales the device size to 65%
of its original size.
<div class="cd-iphone-6" style="font-size: 65%">
To center the device horizontally within its parent element, add the class cd-center.
<div class="cd-iphone-6 cd-center">
This is a theme that gives every device the apperance of being a "blueprint". Use the class cd-blueprint to use it on any device.
<div class="cd-iphone-6 cd-blueprint">
Heads Up! Only for use with iPad or iPhone
<div class="cd-iphone-6 cd-landscape-left">
<div class="cd-iphone-6 cd-landscape-right">
By default, the screen does not rotate the image with the device, however if you want an element to be rotated on its side with the device add the class cd-landscape-fixed-screen.
<div class="cd-iphone-6 cd-landscape-right cd-landscape-fixed-screen">
Scrolling Screen Helper
Use the "cd-screen-scrolling" class in your screen to allow long images to scroll vertically in the device.
<div class="cd-screen cd-screen-scrolling">
Fill Screen Helper
Neato! The first version of CSSDevices used to have a cd-fill class to add to elements inside the cd-screen to make the element fill the screen completly. However in version 2.0 of CSSDevices, all children elements of cd-screen fill the screen by default!