marvelapp / devices.css

Pure CSS phones and tablets

See the demo here

Usage

In order to use a device, include devices.min.css at the top of your document and then go back to the demo and select the combination you want, and simply copy out the generated HTML. That's it!

This will give you the device you selected, just like we use on Marvel. Use them, tweak them and improve however you want! Also sign up for Marvel if you haven't already because it's pretty good

devices.css's Issues

npm build

Hi,

First of all thank you for your work, this is exactly what I need right now.
Do you think you can release this on npm so that the installation process is easier for everybody?

Thank you again for your effort

Do you plan on adding any new device frames?

It would be great to have Nexus 5 and Nexus 7.

Publish to NPM?

The version on NPM is v0.1.15.

Please consider adding a 'copy' button to copy code to clipboard

Due to the dark code block, selecting and copying the code is rather hard to copy.

Can you please add a 'copy' button to your demo app so that its easier for one to copy the code.

Thanks

Responsive devices ?

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

Add new tag for new code

Please, add new tag with newest changes.

HTTPS support in the demo

The included jquery file uses http://

Landscape on Galaxy Note 8

Hi,
First of all, thank you for this great collection.

The Problem:
The landscape for Galaxy Note 8 doesn't rotate the content

Is it an issue?
Not sure, maybe I'm missing something. but it's working for all other devices.

Screenshots:

HTML:

<div class="marvel-device note8 landscape">
    <div class="inner"></div>
    <div class="overflow">
        <div class="shadow"></div>
    </div>
    <div class="speaker"></div>
    <div class="sensors"></div>
    <div class="more-sensors"></div>
    <div class="sleep"></div>
    <div class="volume"></div>
    <div class="camera"></div>
    <div class="screen">
        <!-- I have an iframe here-->
    </div>
</div>

Screen sizes are not always the original ones

Hi @marvelapp,

thanks for the great CSS devices. It work's amazing!

One question, though: The sizes of the div.screen element are sometimes equal to the original screen specifications (mainly for apple devices) and sometimes not. Is there any plausible reason for that? Original device specs can be found here, for example.

Thank you in advance!
Cheers

iPad Min dosn't switch back to silver

after switching from silver to black you can't switch back to silver.
Would be happy to fix it, but the non-minified js script is missing in the repository...?
Can you please add 'main.js'?

Compatible Browser Lists?

Hello,

Thanks for the awesome CSS Devices and is there is any Browser Compatible report here?

IE 9+ or
Safari 11+ etc?

Thanks.

Split out the device CSS

Currently there is styling in the main css file which applies to elements other than the devices, which might cause leakage into pages that are using these devices.

It would be beneficial to scope the device CSS in a way so nothing leaks into the page that uses the devices and have that available as a separate css file, which would be the main file to use.

Texts won't show up

Device shows up but not my texts content. Content CSS styles are working but no texts appears.

Use class instead of id to target device

.iphone5s > #iphone5s

There doesn't seem to be a reason you are using ids for this. Changing to classes would allow for multiple instances on a page.

Also this: http://css-tricks.com/a-line-in-the-sand/

Can't interact with content

No matter what content i place inside the screen div I can't interact with it (i.e. scroll, click etc.) I gather this is by design, and if so, is there a workaround?

Ipad screen sizes incorrect

It seems that the viewport for the ipad is incorrect. The logical resolution points for the ipad's are 1024x768. I'm not sure why it's listed in the css as being width: 576px; height: 768px;

how to change the size of the device

how to change the size of the device , if i alter the height and width the camera and sensor elements go and collapse eachother

Is there any plan to support iMac and ipad pro?

Integrating with Bootstrap causes phones to show smaller

Hey there,

I noticed that using devices.css in conjunction with bootstrap causes the phones to show up smaller then they are intended to be.

Bootstrap has something to this effect:

* { -webkit-box-sizing: border-box; box-sizing: border-box; }

Removing them fixed the issue and the size returned to normal, I'm not sure if this is an easy fix to not inherit those, but that would widen the compatibility devices.css has with websites as bootstrap is -everywhere-.

Btw, thanks for writing Devices.css, its awesome.

Please help me with responsive

I use marvel-device s5 black and marvel-device iphone6plus landscape, and i have problem with responsive. Is here any way to make this two devices responsive with media queries or something else?

Devise doesn't appear

Hi. I've added CSS file which was mentioned in the documentation. Also added HTML code which was generated by the device while the device doesn't appear. The part of the page where it should appear is empty. Can you help me to solve that problem? Thanks

Support for Pixel 2 XL

Any chance of adding support for the Pixel 2 XL? (please)

iPad Air Device

I think it would be only logical to add the iPad Air to this collection, especially with the iPad mini. If you would prefer, I'd be happy to submit a pull request with the addition!

Registered onto bower

Hey sirs, I've registered this onto bower as "devices.css", so that we could get it anywhere ;)

iPhone SE

With Apple's new iPhone SE, how can we create a preview of it? It appears to be the same size as the iPhone 5, but the home button is the same button for the iPhone 6.

Any chance we can get these with percentages instead of absolute widths?

Really love these, but I have a project where i would need to use one in a 100% width container, and I'd like the phone to scale with it.

Thanks!

Scrolling not available if you go off screen

Currently the CSS doesn't allow for scrolling if you have more content than is in the "viewport" of the device.

If you simply add:

    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;

To the class .marvel-device .screen, it fixes all of that :)