marvelapp / devices.css Goto Github PK

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

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

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

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.

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>

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.

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

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.

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?

Please, add new tag with newest changes.

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?

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

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

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

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;

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 :)

The version on NPM is v0.1.15.

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

Hello,

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

IE 9+ or
Safari 11+ etc?

Thanks.

The included jquery file uses http://

.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/

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!

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

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!

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'?

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