Home > Software engineering >  I have extra space on the right side of my page and I can't get rid of it
I have extra space on the right side of my page and I can't get rid of it

Time：11-24

So I have a responsive web page which is completely fine when it is full screen. However when I minimise my the screen to a max-width of 500px I have extra space on the right side. Somewhere in my code is causing this and I can't spot the problem.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 10px;
}

html {
  font-family: 'Rubik', sans-serif;
  width: 100%;
  height: auto;
}


/* Navbar */

#navbar {
  overflow: hidden;
  background-color: #945A53;
  position: fixed;
  top: 0;
  width: 100%;
}

#navbar a {
  display: block;
  float: left;
  color: #E0BAB6;
  text-align: center;
  padding: 18px 16px;
  font-size: 17px;
}

a {
  text-decoration: none;
  color: black;
}

#navbar a:hover {
  background: #E0BAB6;
  color: #945A53;
}


/* Welcome section */

main {
  margin-top: 50px;
}

#welcome-section {
  width: 100%;
  height: 500px;
  background-color: #406599;
}

#title {
  padding-top: 200px;
  text-align: center;
}

h1 {
  font-size: 5rem;
  color: #E0BAB6;
}

#title p {
  font-size: 2rem;
  font-style: italic;
  color: #E0BAB6;
}

@media only screen and (max-width: 500px) {
  #title {
    padding-top: 150px;
  }
  h1 {
    font-size: 3rem;
  }
}


/* Project section */

.header {
  text-align: center;
  margin-bottom: 50px;
  color: #406599;
}

#project-section {
  background-color: #D1E098;
}

.header {
  font-size: 3rem;
  padding-top: 50px;
}

#projects {
  width: 100%;
  display: flex;
  justify-content: center;
}

.flex-container {
  width: 1100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.project-tile {
  margin: 0 30px 30px 30px;
}

.img {
  width: 450px;
  height: 300px;
}

.caption {
  text-align: center;
  color: #406599;
  padding: 30px;
  font-size: 1.8rem;
}

.btn {
  width: 140px;
  height: 50px;
  border: 1px solid #406599;
  text-align: center;
  padding-top: 1px;
  margin-bottom: 30px;
  border-radius: 5px;
  background-color: #406599;
  color: #E0BAB6;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

#btn-icon {
  font-size: 2.5rem;
  padding: 0 5px;
}

.btn:hover {
  background-color: #E0BAB6;
  color: #406599;
  border-color: #E0BAB6;
}

@media only screen and (max-width: 500px) {
  #navbar {
    border-bottom: 1px solid #665A5A;
  }
}

@media only screen and (max-width: 500px) {
  #welcome-section {
    height: 400px;
  }
  #title {
    padding: ;
  }
  h1 {
    font-size: 3rem;
  }
  #title p {
    font-size: 1.5rem;
  }
}


/* Contact section */

#contact-section {
  background-color: #8DB0E0;
}

#contact h2 {
  font-size: 5rem;
  text-align: center;
  padding-top: 150px;
  padding-bottom: 10px;
  color: #945A53;
}

#contact p {
  text-align: center;
  font-size: 1.8rem;
  color: #945A53;
  font-style: italic;
  margin: 10px;
}

#icon {
  text-align: center;
  color: #945A53;
  padding-bottom: 150px;
  animation-name: icon;
  animation-duration: 3s;
}

@keyframes icon {
  0% {
    top: 0px;
  }
  50% {
    top: 50px;
  }
  100% {
    top: 0px;
  }
}

#item {
  font-size: 2.8rem;
  padding-top: 50px;
}

.text {
  font-family: 'Rubik', sans-serif;
  color: #945A53;
  padding-right: 30px;
  padding-left: 8px;
  font-size: 2.8rem;
}

@media only screen and (max-width: 500px) {
  #contact h2 {
    font-size: 3.8rem;
  }
  #item {
    font-size: 1.8rem;
  }
  .text {
    font-size: 1.8rem;
  }
}

footer {
  background-color: #8DB0E0;
  padding: 40px;
  color: #945A53;
  width: 100%;
}

.footer {
  float: right;
  font-size: 1.8rem;
}

@media only screen and (max-width: 500px) {
  .footer {
    float: none;
    text-align: center;
  }
}
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ 1lW4y57PTFmhCaXp0ML5d60M1M7uH2 nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Rubik&family=Signika Negative:wght@600&family=Zen Antique Soft&display=swap" rel="stylesheet">


<!-- Body -->
<nav id="navbar">
  <a href="#about">About</a>
  <a href="#work">Work</a>
  <a href="#contact">Contact</a>
</nav>

<main>

  <section id="welcome-section">
    <div id="title">
      <h1 id="about">Hello there, I'm Tamanna</h1>
      <p>A front-end developer</p>
    </div>
  </section>

  <section id="project-section">
    <h3 class="header">These are some of my projects</h3>

    <div id="projects">
      <div class="flex-container">

        <div class="project-tile" id="work">
          <a href="https://codepen.io/itstams/pen/NWvvjeJ" class="profile-tile" target="_blank">
            <img class="img" src="https://codepen.io/itstams/pen/NWvvjeJ/image/small.png" alt="Cameron Boyce">
            <div class="caption">Tribute Page</div>
          </a>
        </div>

        <div class="project-tile" id="work">
          <a href="https://codepen.io/itstams/pen/GRvOQPE" class="profile-tile" target="_blank">
            <img class="img" src="https://codepen.io/itstams/pen/GRvOQPE/image/small.png" alt="Survey form">
            <div class="caption">Survey Form Page</div>
          </a>
        </div>

        <div class="project-tile" id="work">
          <a href="https://codepen.io/itstams/pen/porpEVN" class="profile-tile" target="_blank">
            <img class="img" src="https://codepen.io/itstams/pen/porpEVN/image/small.png" alt="Product landing page">
            <div class="caption">Product Landing Page</div>
          </a>
        </div>

        <div class="project-tile" id="work">
          <a href="https://codepen.io/itstams/pen/KKveMRy" class="profile-tile" target="_blank">
            <img class="img" src="https://codepen.io/itstams/pen/KKveMRy/image/small.png" alt="Technical Documentation Page">
            <div class="caption">Technical Documentation Page</div>
          </a>
        </div>

        <a href="https://codepen.io/itstams" class="btn" target="_blank">Show all <span id="btn-icon" class="fas fa-angle-right"></span></a>

      </div>
    </div>
  </section>

  <section id="contact-section">
    <div id="contact">
      <h2>Let's work together...</h2>
      <p>How would you like for us to meet?</p>

      <div id="icon">
        <span id="item" class="fab fa-codepen icon"><a class="text" href="#">Codepen</a></span>
        <span id="item" class="fab fa-github icon"><a class="text" href="#">Github</a></span>
        <span id="item" class="fas fa-at icon"><a class="text" href="#">Send a email</a></span>
        <span id="item" class="fab fa-linkedin"><a class="text" href="#">LinkedIn</a></span>
      </div>
    </div>
  </section>

</main>

<footer>
  <p class="footer">&copy; Created for freeCodeCamp</p>
</footer>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Overflow seems to be from img being wider than the screen at one point.

A fix could be for the pictures linked in your projects :

#projects a img {
max-width:100%;
height:auto;
}

Your settings are actually :

.img {
  width: 450px;/* this becomes too much at one point */
  height: 300px; /* its fine as long as img is 150px of width, less and distorsion appears */
}


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 10px;
}
/* fix */
#projects a img {
max-width:100%;
height:auto;
}
/* end fix */ 


html {
  font-family: 'Rubik', sans-serif;
  width: 100%;
  height: auto;
}


/* Navbar */

#navbar {
  overflow: hidden;
  background-color: #945A53;
  position: fixed;
  top: 0;
  width: 100%;
}

#navbar a {
  display: block;
  float: left;
  color: #E0BAB6;
  text-align: center;
  padding: 18px 16px;
  font-size: 17px;
}

a {
  text-decoration: none;
  color: black;
}

#navbar a:hover {
  background: #E0BAB6;
  color: #945A53;
}


/* Welcome section */

main {
  margin-top: 50px;
}

#welcome-section {
  width: 100%;
  height: 500px;
  background-color: #406599;
}

#title {
  padding-top: 200px;
  text-align: center;
}

h1 {
  font-size: 5rem;
  color: #E0BAB6;
}

#title p {
  font-size: 2rem;
  font-style: italic;
  color: #E0BAB6;
}

@media only screen and (max-width: 500px) {
  #title {
    padding-top: 150px;
  }
  h1 {
    font-size: 3rem;
  }
}


/* Project section */

.header {
  text-align: center;
  margin-bottom: 50px;
  color: #406599;
}

#project-section {
  background-color: #D1E098;
}

.header {
  font-size: 3rem;
  padding-top: 50px;
}

#projects {
  width: 100%;
  display: flex;
  justify-content: center;
}

.flex-container {
  width: 1100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.project-tile {
  margin: 0 30px 30px 30px;
}

.img {
  width: 450px;
  height: 300px;
}

.caption {
  text-align: center;
  color: #406599;
  padding: 30px;
  font-size: 1.8rem;
}

.btn {
  width: 140px;
  height: 50px;
  border: 1px solid #406599;
  text-align: center;
  padding-top: 1px;
  margin-bottom: 30px;
  border-radius: 5px;
  background-color: #406599;
  color: #E0BAB6;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

#btn-icon {
  font-size: 2.5rem;
  padding: 0 5px;
}

.btn:hover {
  background-color: #E0BAB6;
  color: #406599;
  border-color: #E0BAB6;
}

@media only screen and (max-width: 500px) {
  #navbar {
    border-bottom: 1px solid #665A5A;
  }
}

@media only screen and (max-width: 500px) {
  #welcome-section {
    height: 400px;
  }
  #title {
    padding: ;
  }
  h1 {
    font-size: 3rem;
  }
  #title p {
    font-size: 1.5rem;
  }
}


/* Contact section */

#contact-section {
  background-color: #8DB0E0;
}

#contact h2 {
  font-size: 5rem;
  text-align: center;
  padding-top: 150px;
  padding-bottom: 10px;
  color: #945A53;
}

#contact p {
  text-align: center;
  font-size: 1.8rem;
  color: #945A53;
  font-style: italic;
  margin: 10px;
}

#icon {
  text-align: center;
  color: #945A53;
  padding-bottom: 150px;
  animation-name: icon;
  animation-duration: 3s;
}

@keyframes icon {
  0% {
    top: 0px;
  }
  50% {
    top: 50px;
  }
  100% {
    top: 0px;
  }
}

#item {
  font-size: 2.8rem;
  padding-top: 50px;
}

.text {
  font-family: 'Rubik', sans-serif;
  color: #945A53;
  padding-right: 30px;
  padding-left: 8px;
  font-size: 2.8rem;
}

@media only screen and (max-width: 500px) {
  #contact h2 {
    font-size: 3.8rem;
  }
  #item {
    font-size: 1.8rem;
  }
  .text {
    font-size: 1.8rem;
  }
}

footer {
  background-color: #8DB0E0;
  padding: 40px;
  color: #945A53;
  width: 100%;
}

.footer {
  float: right;
  font-size: 1.8rem;
}

@media only screen and (max-width: 500px) {
  .footer {
    float: none;
    text-align: center;
  }
}
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ 1lW4y57PTFmhCaXp0ML5d60M1M7uH2 nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Rubik&family=Signika Negative:wght@600&family=Zen Antique Soft&display=swap" rel="stylesheet">


<!-- Body -->
<nav id="navbar">
  <a href="#about">About</a>
  <a href="#work">Work</a>
  <a href="#contact">Contact</a>
</nav>

<main>

  <section id="welcome-section">
    <div id="title">
      <h1 id="about">Hello there, I'm Tamanna</h1>
      <p>A front-end developer</p>
    </div>
  </section>

  <section id="project-section">
    <h3 class="header">These are some of my projects</h3>

    <div id="projects">
      <div class="flex-container">

        <div class="project-tile" id="work">
          <a href="https://codepen.io/itstams/pen/NWvvjeJ" class="profile-tile" target="_blank">
            <img class="img" src="https://codepen.io/itstams/pen/NWvvjeJ/image/small.png" alt="Cameron Boyce">
            <div class="caption">Tribute Page</div>
          </a>
        </div>

        <div class="project-tile" id="work">
          <a href="https://codepen.io/itstams/pen/GRvOQPE" class="profile-tile" target="_blank">
            <img class="img" src="https://codepen.io/itstams/pen/GRvOQPE/image/small.png" alt="Survey form">
            <div class="caption">Survey Form Page</div>
          </a>
        </div>

        <div class="project-tile" id="work">
          <a href="https://codepen.io/itstams/pen/porpEVN" class="profile-tile" target="_blank">
            <img class="img" src="https://codepen.io/itstams/pen/porpEVN/image/small.png" alt="Product landing page">
            <div class="caption">Product Landing Page</div>
          </a>
        </div>

        <div class="project-tile" id="work">
          <a href="https://codepen.io/itstams/pen/KKveMRy" class="profile-tile" target="_blank">
            <img class="img" src="https://codepen.io/itstams/pen/KKveMRy/image/small.png" alt="Technical Documentation Page">
            <div class="caption">Technical Documentation Page</div>
          </a>
        </div>

        <a href="https://codepen.io/itstams" class="btn" target="_blank">Show all <span id="btn-icon" class="fas fa-angle-right"></span></a>

      </div>
    </div>
  </section>

  <section id="contact-section">
    <div id="contact">
      <h2>Let's work together...</h2>
      <p>How would you like for us to meet?</p>

      <div id="icon">
        <span id="item" class="fab fa-codepen icon"><a class="text" href="#">Codepen</a></span>
        <span id="item" class="fab fa-github icon"><a class="text" href="#">Github</a></span>
        <span id="item" class="fas fa-at icon"><a class="text" href="#">Send a email</a></span>
        <span id="item" class="fab fa-linkedin"><a class="text" href="#">LinkedIn</a></span>
      </div>
    </div>
  </section>

</main>

<footer>
  <p class="footer">&copy; Created for freeCodeCamp</p>
</footer>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

note : that overflow:hidden; can cut it off too

#project-section {
  background-color: #D1E098;
  overflow:hidden;
}

CodePudding user response：

Inbetween product landing page and technical documentation page in your HTML is an image, a screenshot. This is forcing the wider view. As you can see in mobile view that images continues to be the full width of the screen. if you shrink it or use some overflow commands everything should fall back in line.

Page link：https//www.codepudding.com/Softwareengineering/203252.html

Prev:<img src: <call and then call again>/>
Next:vertical line on content based height inside flex
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding