[beta] example screen content not visible until code is run

Challenge adjusting-the-padding-of-an-element has an issue. User Agent is: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36. Please describe how to reproduce this issue, and include links to screenshots if possible.

    
    
<style>
.injected-text {
  margin-bottom: -25px;
  text-align: center;
}

.box {
  border-style: solid;
  border-color: black;
  border-width: 5px;
  text-align: center;
}

.yellow-box {
  background-color: yellow;
  padding: 10px;
}

.red-box {
  background-color: red;
  padding: 20px;
}

.green-box {
  background-color: green;
  padding: 10px;
}
</style>
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>

The “phone screen” where the code is shown doesn’t update until after the run test button is pressed. Has been this way since I began the CSS section of the beta. It makes it awkward when working on the cat photo app, but when it gets to showing the margins, it gives me the picture of the cat photo app instead of the yellow, red, and green boxes.

[Greenheart]

@no-stack-dub-sack Nice detective work!

I’ll see if I can find the code that could be used to fix this.

Edit: I’m looking at a solution for this locally. Will hopefully have a PR ready in the near future.

[QuincyLarson]

@no-stack-dub-sack Yes - once we ship @berkeleytrue’s layout, we can see whether these are still relevant and then tackle them. I’ll leave this issue open for now.