CODEWITHSUNDEEP
htmlcssflexbox
David Skx
David Skx

Reputation: 131

How to properly preserve space between divs?

These two divs hug each other whenever I switch to mobile view. What would be the best way to preserve the space between these two divs, so that it looks identical to the desktop version when I switch to mobile? I'm hoping not to use media queries.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  background-color: rgb(73,73,73);
}

.container {
  height: 60vh;
  width: 40vh;
  background-color: rgb(213, 213, 213);
  border-radius: 3vh;
  filter: drop-shadow(1vh 1.2vh 0.5vh rgb(38, 38, 38)) ;
}

.scoreboard {
  height: 20vh;
  width: 40vh;
  background-color: rgb(213, 213, 213);
  border-radius: 2vh;
  filter: drop-shadow(1vh 1.2vh 0.3vh rgb(38, 38, 38)) ;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./master.css">
  <title>Document</title>
</head>
<body>

  <div class="container"></div>
  <div class="scoreboard"></div>

</body>
</html>

Upvotes: 0

Views: 25

Answers (1)

johannchopin
johannchopin

Reputation: 14844

You can fix this space using fixed size like px. Just make the body justify-content: center and add a margin-right to the .container element:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(73,73,73);
}

.container {
  height: 60vh;
  width: 40vh;
  margin-right: 100px; /* add here you spacing value */
  background-color: rgb(213, 213, 213);
  border-radius: 3vh;
  filter: drop-shadow(1vh 1.2vh 0.5vh rgb(38, 38, 38)) ;
}

.scoreboard {
  height: 20vh;
  width: 40vh;
  background-color: rgb(213, 213, 213);
  border-radius: 2vh;
  filter: drop-shadow(1vh 1.2vh 0.3vh rgb(38, 38, 38)) ;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./master.css">
  <title>Document</title>
</head>
<body>

  <div class="container"></div>
  <div class="scoreboard"></div>

</body>
</html>

Have a look to the jsfiddle.

Upvotes: 1

Related Questions