CODEWITHSUNDEEP
htmlcssresponsiveness
General Zlatan
General Zlatan

Reputation: 75

Content gets out of scale when resizing the browser CSS

I've had a similar question lately, but I have a problem with my responsiveness. My footer works fine and stays the way I want when I increase or decrease the size of my browser. I want this also for the rest of my page, but I can't fix that.

This is how my ideal homepage looks like:

enter image description here

But when I increase (or decrease) the browser, this happens:

enter image description here

The footer stays the same, but the rest of the content gets out of proportion. This is my code:

html {
  position: relative;
  min-height: 100%;
}

html, body {
  margin: 0%;
  padding: 0%;
  background: #ffffff;
}

.nav {
  margin-bottom: 2%;
  margin-right: 2%;
  margin-left: 2%;
}

.nav li {
  list-style-type: none;
  list-style-position: inside;
  align-self: center;
  display: inline-block;
  margin-left: 4%;
  margin-right: 4%;
  vertical-align: middle;
}

.nav a {
  text-decoration: none;
  color: #101b45;
  font-family: Garamond; 
  font-weight: bold;
  font-size: 2.5em;
}

.nav a:hover {
  color: #5166b7;
}

.nav img {
  width: 85%;
}

.footer {
  font-size: 1.2em;
  text-align: center;
  position: absolute;
  bottom: 0;
  height: 3%;
  margin-left: 2%;
  margin-bottom: 1%;
  width: 96%;
}

.socials {
  margin-right: 2%;
  width: 2%;
}

.footer img:hover {
  transform: scale(1.2);
}
<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="index.css">
<title>Home</title>

</head>

<body>

<div class="nav">
	<ul>
		<li class="aboutme"><a href="#">Over Mij</a></li>
		<li class="resume"><a href="#">Resumé</a></li>
		<li><img class="home_cartoon" src="cartoon.png"></li>
		<li class="portfolio"><a href="#">Portfolio</a></li>
		<li class="contact"><a href="#">Contact</a></li>
	</ul>
</div>

<div class="footer">
	<a href="" target="_blank"><img class="socials" src="Linkedin.png"></a>
	<a href="" target="_blank"><img class="socials" src="Twitter.png"></a>
	<a href="" target="_blank"><img class="socials" src="Facebook.png"></a>
	<a href="" target="_blank"><img class="socials" src="Instagram.png"></a>
</div>

</body>

</html>

Upvotes: 0

Views: 150

Answers (1)

Daniel
Daniel

Reputation: 1420

It will be easier to use a background image for your image and split the menu into a left and right container.

Like so: http://jsfiddle.net/1xr3hnc5/15/

<div class="nav">
    <ul class="left">
        <li class="aboutme"><a href="#">Over Mij</a></li>
        <li class="resume"><a href="#">Resumé</a></li>
    </ul>

  <ul class="right">
    <li class="portfolio"><a href="#">Portfolio</a></li>
        <li class="contact"><a href="#">Contact</a></li>
  </ul>
</div>

And for the css, something like this:

.nav {
  height: 100vh;
  width: 100vw;
  background: url('http://www.placecage.com/c/400/800') center center no-repeat;
}

.nav ul {
  position: relative;
  top: 50%;
  width: 30%;
  padding: 0;
}

.nav .left {
  float: left;
  padding-left: 30px;
}

.nav .right {
  float: right;
  padding-right: 30px;
}

Note this will not look good on mobile so you will need to figure out another layout for mobile. For that, use media queries to display a different layout.

Upvotes: 1

Related Questions