To use `*` selector in a container is dangerous about devices.css HOT 2 OPEN

I agree, this seems like bad practice. This CSS makes it impossible to properly render nested HTML content within the .device-content block of the .device.

I managed to fix this by modifying the base devices.css styles with this:

.device,
.device::before,
.device::after,
.device > *,
.device > * > *,
.device > *::before,
.device > *::after,
.device > * > *::before,
.device > * > *::after {
  box-sizing: border-box;
  display: block;
}

It works well so long as the device structure follows the pattern (which all of the devices as of v0.1.16 do):

<div class="device device-iphone-x">
  <div class="device-frame">
    <img class="device-content" src="...">
  </div>
  <div class="device-stripe"></div>
  <div class="device-header"></div>
  <div class="device-sensors"></div>
  <div class="device-btns"></div>
  <div class="device-power"></div>
</div>

I hope this helps anyone else who's running into the same issue!

from devices.css.

I ran into the same issue with https://github.com/picturepan2/devices.css/blob/master/src/_reset.scss#L3 setting display:block to every element. If you want to set markup inside the content this can break the content UI.

from devices.css.