Responsive devices ?

[roszpun]

Is here any way to make devices responsive ? Something like images with css : width:100%; height:auto; ?

[dougwells]

I was able to center the phone horizontally & vertically by adding this code to my CSS file
.marvel-device {
margin: 0 auto;
top: 50vh;
margin-top: -410px;
display: block;
}

[Romainpetit]

The real issue is the device metrics, not positioning.
Since the whole project was created using a lot of px values, the simplest way is to use the css zoom property.

.marvel-device {
    zoom: 0.8
}

to be used in media queries !

[joshkpeterson]

It would be ideal if the entire device and everything in it was able to scale linearly according to vh or %.

Also, it's worth nothing that zoom is not supported in firefox at all.

This would be a great thing to do if someone wanted to contribute to the project. Non responsive devices is a dealbreaker for me, can't use this library.

[rickyruiz]

To achieve this you can use the css selector transform with scale property and media queries. DEMO

[evansanto]

Hi everyone, brand new to Github (and relatively new to coding in general) - just want to let you know that I found a bit of a workaround for this (totally unsure of browser compatibility etc!):

1. Find & replace all "px" for "em" in the devices.min.css file.
2. Place the html in a container that sets the 'font-size' to whatever you need (setting it at 1px will be equal to the current size - I used font-size:0.5px;).
3. You can then adjust the font-size at different break points if required.

Hopefully that proves useful for someone! (I only used the iphone 8 code so unsure if it works with all devices but I don't see why not?)
Cheers!

[adriandmitroca]

@evansanto

This is literally great idea, you won this issue Evan!

Using scale or zoom isn't really a solution as it mixes DOM measurements that are hard to handle.

[rickyruiz]

You're right @adriandmitroca , @evansanto totally nailed it, it should work with all the devices. Here's a demo. vw unit could also be used to avoid media queries.

[kickbk]

@evansanto very nice indeed!

[osrec]

Give https://github.com/osrec/ResponsiveDevices.css a try for totally responsive devices - they're not as detailed as the very realistic ones on here, but might be useful to someone :)

[philipkiely]

@evansanto be careful with this on chrome, you can run into issues with Chrome's minimum font size making the device huge

[philipkiely]

I wrote a different approach to this issue. My version modifies the scss directly, which you can then use to create the phones in any size you want. If you want to change between multiple sizes, use @media queries and load multiple files.

https://github.com/philipkiely/devices.css

[Romainpetit]

Nice endeavour @philipkiely, it looks like you nailed it.

[alexkuc]

Word of caution regarding zoom:

Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

source: https://developer.mozilla.org/en-US/docs/Web/CSS/zoom