jzbakos jzbakos - 29 days ago 11
HTML Question

How do I prevent body from going off screen?

I am making a simple website for myself. When I open the website in a browser and decrease the browser horizontal width the body/white rectangle will go off the screen. How do I prevent this from happening?

Screenshot of issue: http://imgur.com/a/V5EtZ

Also, feel free to point any flaws/issues in my code. I am new to web development and need as much criticism as I can get.



html {
background-image: url("bg.jpg");
padding: 150px;
background-repeat: no-repeat;
background-size: 100% 100%;
}
h1 {
line-height: 15px;
text-align: center;
font-weight: 600;
color: rgba(61, 61, 61, 0.7);
}
h3 {
line-height: 0px;
text-align: center;
font-weight: 100;
color: rgba(61, 61, 61, 0.7);
}
hr {
border: 0;
color: red;
border-bottom: 1px solid rgba(168, 168, 168, 0.92);
width: 320px;
}
p {
text-align: center;
}
body {
padding: 25px;
max-width: 400px;
min-width: 400px;
height: 200px;
font-family: "Courier New", Courier, monospace;
background: #fafafa;
margin: auto;
border-radius: 3px;
box-shadow: 0px 0px 90px rgba(58, 58, 58, 0.71);
opacity: 0.95;
position: static;
}
footer {
margin-top: 45px;
opacity: 0.5;
}

<html lang="en">

<head>
<meta charset="utf 8" />
<title>JOSH BAKOS</title>
<link rel="stylesheet" href="main.css">
</head>

<body>

<header>
<h1>JOSH BAKOS</h1>
<h3>STUDENT</h3>
</header>

<hr>

<p>I am a Java developer and a future Software Engineering Student @ UOIT.</p>

<p>
<br><a href="https://twitter.com/jzbakos" target="_blank">Twitter</a> &bull; <a href="http://stackoverflow.com/users/6383960/jzbakos" target="_blank">StackOverflow</a> &bull; <a href="https://github.com/jzbakos" target="_blank">Github</a>
</p>

<footer>
<p>&copy; Josh Bakos</p>
</footer>

</body>

</html>




Answer

No need to complicate things with media queries in your particular example. The solution here is very simple.

First of all, change padding: 150px; to padding-top: 150px; in html. When you use padding instead of padding-top, this property will create space around your body that will push it out of the screen when the window is too small.

Lastly, remove the min-width: 400px; property from body or make it less than max-width. min-width: 400px; is the property that prevents your body to adjust to the size of the window.

My personal advice on this: Media queries might still be useful in the case of your web page. If you want the vertical space between your body element and the top hand corner of the window to be reduced on smaller resolutions, you could add something like this at the end of your stylesheet:

@media ( max-width: 767px ) { 
  html {
  padding-top: 20px;
  }
}

Adjust both values depending on your preferences. You can also use min-width or width in @media and put as many of media queries as you like.

Comments