Devices won't scale for responsive

[vertis]

I've spent a bunch of time trying to get these devices to scale when displayed on a mobile screen and can't seem to get them to work correctly. Using something like transform shrinks the device but also screws up any alignment and puts it off the page.

[makeitTim]

Hey yeah, I was just trying that. Transform is a mess here.

I think the correct approach would be re-doing all the units. Easiest would be to use rem units relative to the html font-size, and then set the html font-size to vw or vh and/or using @media breakpoints to fit your responsiveness. The problem with that is playing nice with the rest of the units on the page.

The same idea would have be done with em but the nested element structure would make that complicated to convert to.

[kovic]

i think one option is, rewrite in the html the css .device{ transform: scale(1); } in every mediaquery, with this the device resize fast and the content resize to, to align the dervice i create a div with other class over, simple put the div alignment

(sorry for my english)

[brunolemos]

Found this responsive one for iphone x: https://codepen.io/dani3lsz/pen/MEZjeo

Ideally all of them should be responsive :(

[khasky]

+1, Absolutely useless without responsive mode.

[JeanHules]

css zoom seems to be a quick and easy temporary fix.

[iMerica]

css zoom will only work in Chrome. For cross-browser, you need to use transform: scale(), however this will also require some work to account for the padding.

[rvilgalys]

Ran into this issue myself and this works pretty well if you just need responsive sizes:

.device {
  position: relative;
  transform: scale(1);
  transform-origin: 50% 0%;
  z-index: 1;
}

@media only screen and (max-width: 1024px) {
  .device {
    transform: scale(0.75);
  }
}

@media only screen and (max-width: 768px) {
  .device {
    transform: scale(0.66);
  }
}

@media only screen and (max-width: 640px) {
  .device {
    transform: scale(0.5);
  }
}

[JiangWeixian]

Currently I forked the source css file from package devices.css, use a tricky way to add --devices-scale to .device. And replace each px value to calc(var(--devices-scale)*${p1}), e.g.

.device {
  --devices-scale: 1;
}

.device-iphone-14-pro .device-frame {
  background: #010101;
  border: calc(var(--devices-scale)*1px) solid #1b1721;
  border-radius: calc(var(--devices-scale)*68px);
  box-shadow: inset 0 0 calc(var(--devices-scale)*4px) calc(var(--devices-scale)*2px) #c0b7cd, inset 0 0 0 calc(var(--devices-scale)*6px) #342c3f;
  height: calc(var(--devices-scale)*868px);
  padding: calc(var(--devices-scale)*19px);
  width: calc(var(--devices-scale)*428px);
}

In this way, device will not spend original size. Already open pr here https://github.com/picturepan2/devices.css/pull/18

[configtheworld]

Currently I forked the source css file from package devices.css, use a tricky way to add --devices-scale to .device. And replace each px value to calc(var(--devices-scale)*${p1}), e.g.

.device {
  --devices-scale: 1;
}

.device-iphone-14-pro .device-frame {
  background: #010101;
  border: calc(var(--devices-scale)*1px) solid #1b1721;
  border-radius: calc(var(--devices-scale)*68px);
  box-shadow: inset 0 0 calc(var(--devices-scale)*4px) calc(var(--devices-scale)*2px) #c0b7cd, inset 0 0 0 calc(var(--devices-scale)*6px) #342c3f;
  height: calc(var(--devices-scale)*868px);
  padding: calc(var(--devices-scale)*19px);
  width: calc(var(--devices-scale)*428px);
}

In this way, device will not spend original size. Already open pr here #18

Thanks @JiangWeixian , I do not know using that much of calc will effect as less performance while page loading or not but after replacing the all px elements with calc(var(--devices-scale)*${p1}), basically I created lg md sm xs classes and worked perfectly.

.device {
  position: relative;
  transform: scale(1);
  z-index: 1;
}
.device-lg {
  --devices-scale: 1;
}
.device-md {
  --devices-scale: 0.6;
}
.device-sm {
  --devices-scale: 0.4;
}
.device-xs {
  --devices-scale: 0.2;
}