CODEWITHSUNDEEP
htmlcssresponsive-design
atman_lens
atman_lens

Reputation: 802

Why is my webpage too wide?

Disclaimer: I am very new to coding and this is my first question on this site, so please point out any lack of etiquette on my part. Also, off-topic related pointers on my coding are welcome.

I am building a portfolio page and have tried to make my page responsive (using em on images, text, padding etc.)

For some reason, the page displays too widely (need to scroll right to center content). Could someone point me in the right direction?

My code is as follows:

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
  <nav>
    <!-- Start of Navigation -->
    <div class="container-fluid">
      <ul>
        <li id="name">Nathan King</li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#about">About</a></li>
      </ul>
    </div>
  </nav>
  <!-- End of Navigation/Start of Content -->
  <div class="content">
  <div class="about">
    <!-- Start of About -->
    <a id="about"></a>
    <h2>Enter text about my education and skills<h2/><img src="https://preview.ibb.co/i1JZv6/me.jpg" class=".img-responsive">
  </div><!-- End of About/Start of Portfolio -->
  <div class="portfolio" id="portfolio"> 
    <h1>Portfolio</h1>
    <div class="row">
      <div class="photo span4"></div>
      <div class="photo span4"></div>
    </div>
    <div class="row">
      <div class="photo"></div>
      <div class="photo"></div>
    </div>
  </div>
  <!-- End of Portfolio/Start of Contact -->
  <div class="contact">
    <a id="contact"></a>
    <h2>Contact me:</h2>
    <div id="soc-btn">
      <a href="https://www.facebook.com/#" class="fa fa-facebook" target="_blank"></a>
      <a href="https://twitter.com/#" target="_blank" class="fa fa-twitter"></a>
    </div>
  </div>
</body>

CSS

body {
  margin: 0 auto;
  padding: 0;
  background-color: #ccccff;
  width 100%;
}
nav {
  margin: 0 auto;
  padding: 0 auto;
  width: 100%;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #9099a2;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
}
li {
  display: inline;
  float: right;
}

nav a {
  text-decoration: none;
  font-family: arial;
  display: block;
  padding: 1em 0.5em 1em 0.5em;
  color: white;
  width: 5em;
  text-align: center;
}
nav a:hover {
  opacity: 0.7;
}
nav a.active {
  background-color: #63799d;
  font-weight: bold;
}

#name {
  float: left;
  font-family: arial;
  padding: 1em 0.5em 1em 1em;
  color: white;
}
.content {
  margin: 0 auto;
  padding: 0 auto;
  width: 100%;
}

.about {
  padding: 4em 2em 2em 2em;
  margin: 0 auto;
  background-color: #6d7993;
  width: 100%;
}

.about h2 {
  text-align: center;
  color: #d5d5d5;
}
.about img {
  height: 9em;
  width: 9em;
  border-radius: 50%;
  margin-top: 1em;
}

h1,
h2,
p {
  font-family: calibri;
}

.portfolio {
  padding: 4em 2em 4em 2em;
  margin: 0 auto;
  background-color: #d5d5d5;
  text-align: center;
  height: 100%;
  width: 100%;
}
.portfolio h1 {
  color: Black;
}

.photo {
  width: 10em;
  height: 5em;
  background-color: #6d7993;
  padding: 4em;
  margin: 4em;
  display: inline-block;
  border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;
  -moz-border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;
  -webkit-border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;
}

.contact {
  padding: 4em 2em 4em 2em;
  background-color: #96858f;
  color: #d5d5d5;
  height: 100%;
  width: 100%;
  text-align: center;
}

.soc-btn {
  margin: 0 auto;
}

.fa {
  padding: 20px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
}

.fa:hover {
  opacity: 0.7;
}

.fa-facebook {
  background: #3b5998;
  color: white;
}

.fa-twitter {
  background: #55acee;
  color: white;
}

Upvotes: 0

Views: 1527

Answers (1)

davvv
davvv

Reputation: 792

You need a: 

* {
  box-sizing: border-box
}

This is essential for responsive designs, as it tells the webpage to including padding and border in the element's total width and height. If you add this, your page displays fine.

This article online here, explains this very well.

Take a look at your webpage here: https://jsfiddle.net/tfr8f8az/

The * targets all elements.

Upvotes: 2

Related Questions