Adjusting the Padding of an Element-not mobile friendly

Challenge Name

Adjusting the Padding of an Element https://www.freecodecamp.com/challenges/adjusting-the-padding-of-an-element

Issue Description

Using Chrome browser for Samsung Galaxy s5… Basically, while attempting to change the green table’s padding in this challenge, the padding size just shrinks and stays this way. It doesn’t seem to matter what value is placed in the code, the green padding just stays at the smaller size. This includes having the correct value of 20px; and thus, the test will spit back an error every time, even with the correct code. This issue seems to have been brought up several times, but closed every time with little to no real investigation. Several of these challenges have similar issues when attempted from a mobile platform. It’s frustrating not to be able to make progress when I don’t have a pc available…

Browser Information

• Browser Name, Version: chrome 58.0.3029.83
• Operating System: Android 6.0.1
• Mobile, Desktop, or Tablet: mobile phone- Samsung Galaxy s5

Your Code

<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: 20px;
  }
</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>

Screenshot

https://plus.google.com/109521751887572320207

[cdgalvan]

@tommygebru thanks for posting that screen shot, wasn’t quite sure the correct way to do that

[WilliamSpruyt]

It is something to do with the white space before ‘padding’. I played around deleting some and was able to pass.