To use * selector in a container is dangerous

[Dafrok]

The code below makes all elements in the device container to be block level, that's not a good idea I suppose.

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

devices.css/src/_reset.scss

Line 3 in f8a06c1

.device * {

[do-adams]

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!

[aaarichter]

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.