Search code examples
htmlcssflexboxcss-position

HTML file shows blank screen even though it has content inside it

Just as i added position:absolute; to my h3 inside .panel class (which has a postion: relative;), everything starts to fall apart. when i refresh i still get blank page , i tried to inspect my elements from dev tools, and when i decreased the viewport width, suddenly it appears from nowhere. Also i noticed that .panel's width is now 0, but how?

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style-type: none;
  text-decoration: none;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  display: flex;
  max-width: 90vw;
}

.panel {
  height: 80vh;
  border-radius: 50px;
  margin: 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: flex 0.8s ease-in;
  flex: .5;
  cursor: pointer;
  position: relative;
}

.panel h3 {
  position: absolute;
  font-size: 1.5rem;
  bottom: 20px;
  left: 20px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Day-1 Expanding cards</title>
  <link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
  <div class="container">
    <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1619994948937-ef1e758d46ca?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=890&q=80');">
      <h3>Some Heading</h3>
    </div>
    <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1621335819647-09d00a452430?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=668&q=80');">
      <h3>Some Heading</h3>
    </div>
    <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1615653051647-321e464edc86?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80');">
      <h3>Some Heading</h3>
    </div>
    <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1606170034762-cbe66ccabbf8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=750&q=80');">
      <h3>Some Heading</h3>
    </div>
    <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1568056308658-aa380181da25?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1037&q=80');">
      <h3>Some Heading</h3>
    </div>
  </div>
</body>

</html>

Solution

  • Exact fix : changed the max-width:90vw on the .container to width:90vw and this solved the issue.

    This issue happened because, i didn't had the width property set, and hence the container gets a 0 width, and therefore, nothing is shown. Also Max-width pertains to a limitation, and not setting the width.