marvelapp / devices.css Goto Github PK
View Code? Open in Web Editor NEWPure CSS phones and tablets
License: MIT License
Pure CSS phones and tablets
License: MIT License
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'?
Is here any way to make devices responsive ? Something like images with css : width:100%; height:auto; ?
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.
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
.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/
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
The version on NPM is v0.1.15
.
Any chance of adding support for the Pixel 2 XL? (please)
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
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 :)
Hello,
Thanks for the awesome CSS Devices and is there is any Browser Compatible report here?
IE 9+ or
Safari 11+ etc?
Thanks.
It would be great to have Nexus 5 and Nexus 7.
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
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.
The included jquery file uses http://
Please, add new tag with newest changes.
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!
Hey sirs, I've registered this onto bower as "devices.css", so that we could get it anywhere ;)
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
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.
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.
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!
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;
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.