pixelsign / html5-device-mockups

HTML5 mockups of popular devices, to showcase your portfolio and spice up your website.

Home Page:http://pixelsign.github.io/html5-device-mockups/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

height controls not working

bencmbrook opened this issue · comments

Is it only possible to set the width of devices?

Here's an example where I try to use height:
https://jsbin.com/qosejiyuji/edit?html,css,output
(for simplicity in the JSBin the device assets aren't there, but the CSS effect is the same)

commented

Hi @bencmbrook,

basically you cannot control the height of the device through the css height property.
It is a bit more complicated since we need to respect the device's aspect ratio.
So the formula is: Wanted Height = X / Y * 100. X is the Wanted Height, Y is the padding-bottom property of the device DIV. This will calculate the needed width.
Here is the working example: https://jsbin.com/wacezudezi/1/edit?html,css,output

Gotcha. Appreciate the help.