Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Responsive devices ? #21

Open
roszpun opened this issue Sep 15, 2015 · 12 comments

Comments

@roszpun
Copy link

commented Sep 15, 2015

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

@dougwells

This comment has been minimized.

Copy link

commented Feb 4, 2016

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

This comment has been minimized.

Copy link

commented Mar 4, 2016

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

This comment has been minimized.

Copy link

commented Jul 12, 2016

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

This comment has been minimized.

Copy link

commented Aug 11, 2016

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

@evansanto

This comment has been minimized.

Copy link

commented Mar 16, 2018

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

This comment has been minimized.

Copy link

commented Mar 17, 2018

@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

This comment has been minimized.

Copy link

commented Mar 17, 2018

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

This comment has been minimized.

Copy link

commented Mar 22, 2018

@evansanto very nice indeed!

@osrec

This comment has been minimized.

Copy link

commented Aug 9, 2018

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

ibash added a commit to Hustle/devices.css that referenced this issue Jan 17, 2019

Make responsive
As per marvelapp#21
* Replace "px" with "em"
* Set a font-size of "1px" for devices

ibash added a commit to Hustle/devices.css that referenced this issue Jan 17, 2019

Make responsive
As per marvelapp#21
* Replace "px" with "em"
* Set a font-size of "1px" for devices
@philipkiely

This comment has been minimized.

Copy link

commented Apr 5, 2019

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

@philipkiely

This comment has been minimized.

Copy link

commented Apr 13, 2019

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

This comment has been minimized.

Copy link

commented May 9, 2019

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

jeanregisser added a commit to jeanregisser/devices.css that referenced this issue May 22, 2019

Prevent Chrome's minimum font size from making the devices huge
Use 100px as the container element font size and divide all em units by 100.

cc marvelapp#21

jeanregisser added a commit to jeanregisser/devices.css that referenced this issue May 22, 2019

Prevent Chrome's minimum font size from making the devices huge
Use 100px as the container element font size and divide all em units by 100.

cc marvelapp#21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
10 participants
You can’t perform that action at this time.