CSS Container margin bottom issue-CodePudding

Hi for mobile version I need margin bottom (white space from bottom of the screen) to the container, it was not working. I have tried position absolute still it was not working. I don't know what mistake exactly I did in here.

 ****Desktop version CSS****
       #container {
       width: 70%;
       margin: 0 auto;
       display: flex;
       height: 100vh;
       align-items: center;

}

****mobile version CSS****
 `     #container {
       display: block;
       text-align: center;
       margin-bottom:25px;  
}

CodePudding user response：

****mobile version CSS****
 `     #container {
       display: block;
       text-align: center;
       margin-bottom:25px !important;  
}

CodePudding user response：

use this :

<html>
<body>
<div id="container">
  test content
</div>
</body>
</html>

and use this style :

html,body {
padding: 0;
margin: 0;
height: 100%;
}
body {
background-color: red;
}
#container {
background: blue;
color: white;
width: 70%;
margin: 0 auto;
}
@media(min-width:480px) {
#container {
height: 100%;
}
}
@media(max-width:480px) {
#container {
height: calc(100% - 30px);
}
}

CodePudding user response：

You can use position: absolute; and set top left right bottom to 0, then bottom: 25px for mobile version:

.container {
  background-color: red;
  height: 100vh;
  width: 70%;
  position: relative;
}

.item {
  background-color: black;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

@media screen and (max-width: 780px) {
  .item {
    bottom: 20px;
  }
}

<div >
  <div ></div>
</div>