CODEWITHSUNDEEP
htmlcss
Hudson Taylor
Hudson Taylor

Reputation: 1162

Why does the content overflow the viewport when doing horizontal and vertical scroll?

I do not understand why my HTML content is overflowing the viewport both vertically and horizontally. I can scroll in both directions, even though there is no extra content. I have tried changing the width and height on the div of the parents, but that does not fix the problem. Here is my code:

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

body {
  background-color: #111;
  color: #fff;
  text-align: center;
}

h1 {
  padding-top: 200px;
  font-family: 'Rubik Microbe', cursive;
  font-weight: normal;
  font-size: 200px;
}

p {
  font-family: 'Megrim', cursive;
  font-size: 50px;
}
<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">
  <title>SITE</title>
  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="./favicon.ico" type="image/x-icon">
  <!-- FONTS -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Megrim&family=Rubik+Microbe&display=swap" rel="stylesheet">
  <!-- -->
</head>

<body>
  <main>
    <h1>SITE</h1>
    <p>coming soon...</p>
  </main>
  <script src="index.js"></script>
</body>

Any ideas?

Upvotes: 1

Views: 476

Answers (2)

PeterJames
PeterJames

Reputation: 1353

The main problem is padding-top: 200px; on the h1 element. It is not necessary to position elements by using high values of padding or margin, for example.

So, I took off the padding from h1 and added flexbox attributes to body and your layout works with the h1 and p elements now centered in the page.

display:flex;
flex-direction:column;
justify-content: center;
height: 100vh;

height: 100vh; sets the height of the body to the viewport height.

Here, you can find a lot of links to flexbox, in particular the link to A Complete Guide to Flexbox should be of interest.

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

body {
  background-color: #111;
  color: #fff;
  text-align: center;
  display:flex;
  flex-direction:column;
  justify-content: center;
  height: 100vh;
}

h1 {
  font-family: 'Rubik Microbe', cursive;
  font-weight: normal;
  font-size: 200px;
}

p {
  font-family: 'Megrim', cursive;
  font-size: 50px;
}
<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">
  <title>SITE</title>
  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="./favicon.ico" type="image/x-icon">
  <!-- FONTS -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Megrim&family=Rubik+Microbe&display=swap" rel="stylesheet">
  <!-- -->
</head>

<body>
  <main>
    <h1>SITE</h1>
    <p>coming soon...</p>
  </main>
  <script src="index.js"></script>
</body>

Upvotes: 1

Nuwan Kirillawala
Nuwan Kirillawala

Reputation: 11

You can just try overflow: hidden in your body section styling.

body { overflow: hidden;}

Upvotes: 0

Related Questions