0

In the CSS file, In class "container". If I give a padding of even just 1px. The code works fine. But the moment I make it to 0px (or remove it), the "container" shift several pixels down the screen. I don't understand why.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.container {
  background: linear-gradient(135deg, rgb(44, 44, 146), rgb(92, 23, 109));
  min-height: 100vh;
  padding: 1px;
}

.todo {
  background-color: white;
  max-width: 550px;
  min-height: 250px;
  border-radius: 10px;
  margin: 100px auto 20px;
}
<div class="container">
  <div class="todo">
  </div>
</div>

My guess (which might be wrong) is that somehow the "todo" class's top-margin is causing all this. I don't understand why

Dai
  • 141,631
  • 28
  • 261
  • 374
  • `min-height: 100vh;` <-- [Don't do this](https://dev.to/nirazanbasnet/dont-use-100vh-for-mobile-responsive-3o97) – Dai Apr 24 '23 at 15:45
  • why? Please explain a little bit –  Apr 24 '23 at 15:50
  • I posted a link to an article that explains why. Have you read the article? If so, what specific part of the article are you having trouble understanding? – Dai Apr 24 '23 at 15:51
  • Ok, thank you. I didn't notice the link to article. I am kind of new here –  Apr 24 '23 at 15:55

0 Answers0