Background image position is weird in actual mobile view, but normal in desktop mobile view

Question

I'm building a website, and it has a banner in it. The banner works fine in desktop and also desktop mobile view. But for some reason when I open the site on my actual phone, it doesn't appear like it would on desktop mobile view. I want my face to be in the center, but instead my face is in the bottom left.

The other problem I am having within my website is that there seems to be a white space overflow beside it, and overflow-x: hidden, in the body wont fix it. Any help or ideas would be very much appreciated! :)

This is the code

HTML

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
      crossorigin="anonymous"
    />
    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
      crossorigin="anonymous"
    ></script>

    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <link href="./css/about-style.css" rel="stylesheet" />

    <title>Brian Wyann</title>
  </head>

  <body>


    <!--NAVIGATION BAR-->
    <header>
      <nav class="navbar navbar-expand-lg">
        <a class="navbar-brand navbar-left" href="index.html">BrianWyann</a>
        <ul class="navbar-nav navbar-light ml-lg-auto">
          <li class="nav-item active">
            <a class="nav-link" href="./index.html"
              >Home<span class="sr-only">(current)</span></a
            >
          </li>
          <li class="nav-item">
            <a class="nav-link" href="./about.html">About Me</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="./project.html">Projects</a>
          </li>
        </ul>

        <div class="burger navbar-center">
          <div id="line1"></div>
          <div id="line2"></div>
          <div id="line3"></div>
        </div>

        <a href="./contact.html" id="contact">
          <button id="navbutton">Contacts</button>
        </a>
      </nav>
    </header>


    <!--BANNER-->
    <section class="banner">
      <h1 id="banner-text">Who Am I?</h1>
    </section>

    <!--PERSONAL-->
    <div class="personal">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultricies vulputate auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac volutpat lacus, a porta tellus. Nullam accumsan, massa eget condimentum convallis, mauris nunc efficitur augue, in dapibus risus diam euismod lorem. Ut non venenatis magna. Duis eget est aliquam sapien pretium molestie id eget felis. Praesent bibendum ultrices libero. Quisque sodales nulla dui, id iaculis dui dignissim sed. Nam iaculis erat interdum quam tincidunt, Donec viverra dignissim felis, sit amet luctus lacus gravida a. Pellentesque eu dapibus turpis.
        </br></br>
        Sed accumsan ligula cursus. Nullam ut auctor velit, nec maximus mauris. Nullam fermentum volutpat lorem ut eleifend. Aenean facilisis et nisl eget euismod. Curabitur vitae ligula quis dolor cursus euismod ac eu tellus.Cras finibus, libero et molestie rutrum, lorem felis dapibus tellus, a vehicula nulla diam eu ante. Sed euismod leo ligula. Maecenas ut neque metus. Etiam placerat neque sed justo tempus, at fermentum eros ornare. Duis facilisis metus a turpis blandit, a mollis ipsum malesuada.
        </p>
      </div>

    <div class="about">
    <div class="about-container">

      <div class="family">
        <h3><span>My Family</span></h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis fermentum nibh. Maecenas elit ligula, efficitur in finibus a, pretium non ante. Mauris pharetra at libero vitae mollis. Aliquam erat volutpat. Suspendisse vehicula volutpat congue. Aenean commodo nibh efficitur, interdum nisi fermentum, ornare lacus. Donec ultricies orci at metus viverra.
        </p>
      </div>

      <div class="hobbies">
        <h3><span>My Hobbies</span></h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis fermentum nibh. Maecenas elit ligula, efficitur in finibus a, pretium non ante. Mauris pharetra at libero vitae mollis. Aliquam erat volutpat. Suspendisse vehicula volutpat congue. Aenean commodo nibh efficitur, interdum nisi fermentum, ornare lacus. Donec ultricies orci at metus
        </p>
      </div>

    </div>
    </div>


    <!--TRANSITION-->
    <div class="transition"></div>


    <!--FOOTER-->
    <footer class="footer">
      <div class="footer-col-left">
        <div class="footer-container">
          <a id="logobutton" href="index.html">
            <h4 id="logo">BrianWyann</h4>
          </a>

          <div class="socials">
            <a href="https://www.facebook.com/" target="blank"
              ><i class="fab fa-facebook-f"></i
            ></a>
            <a href="https://twitter.com/" target="blank"
              ><i class="fab fa-twitter"></i
            ></a>
            <a href="https://www.instagram.com/" target="blank"
              ><i class="fab fa-instagram"></i
            ></a>
            <a href="https://www.linkedin.com/feed/" target="blank"
              ><i class="fab fa-linkedin-in"></i
            ></a>
          </div>
        </div>
      </div>

      <ul class="footer-col-right">
        <li>
          <h4>Myself</h4>

          <ul class="box">
            <li><a href="./index.html">Home</a></li>
            <li><a href="./about.html">About</a></li>
            <li><a href="./project.html">Projects</a></li>
            <li><a href="./contact.html">Contacts</a></li>
          </ul>
        </li>

        <li class="mooc">
          <h4>MOOCs</h4>

          <ul class="box">
            <li><a href="https://www.edx.org/" target="blank">edX</a></li>
            <li>
              <a href="https://www.coursera.org/" target="blank">Coursera</a>
            </li>
            <li>
              <a href="https://www.futurelearn.com/" target="blank"
                >FutureLearn</a
              >
            </li>
            <li>
              <a href="https://cognitiveclass.ai/" target="blank"
                >CognitiveClass</a
              >
            </li>
          </ul>
        </li>

        <li>
          <h4>Address</h4>
          <ul class="box">
            <li>
              <p>
                C 29, Perumahan Sunter Mediterania, 14340, North Jakarta City,
                Jakarta, Indonesia
              </p>
            </li>
          </ul>
        </li>
      </ul>
      <div class="footer-row-bot">
        <p>All right reserved by &copy;wyannbrian 2020</p>
      </div>
    </footer>

    <script src="./js/app.js"></script>
  </body>
</html>

CSS

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montaga&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins&family=Roboto+Slab&display=swap");

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

button {
  outline: none !important;
}


/*NAVIGATION BAR*/
header {
  position: absolute;
  z-index: 10;
  width: 100%;
  padding: 25px 5%;
}

.navbar-nav {
  flex-direction: row;
}

.navbar-brand {
  font-family: "Oswald", sans-serif;
  font-size: 2em;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  color: rgba(202, 210, 197, 1);
  text-shadow: 1px 1px 3px black;
  margin-right: 0;
}

.navbar-brand:hover {
  color: rgba(202, 210, 197, 1);
}

.nav-item,
.nav-link {
  font-size: 1.05em;
  text-transform: uppercase;
  font-weight: 800;
  margin-right: 20px;
  color: #cad2c5;
  text-shadow: 1px 1px 5px black;
  font-family: "Montaga", serif;
  letter-spacing: 1px;
  transition: all 0.5s;
}

.nav-link:hover {
  background: #2f3e46;
  color: #cad2c5;
}

#navbutton {
  font-size: 1.05em;
  text-transform: capitalize;
  font-weight: 500;
  font-family: "Montaga", serif;
  letter-spacing: 1px;
  padding: 9px 25px;
  background: #cad2c5;
  border: none;
  border-radius: 50px;
  transition: all 0.5s;
  margin-left: 10px;
}

#navbutton:hover {
  background: #2f3e46;
  color: #cad2c5;
}

.burger div {
  width: 25px;
  height: 3px;
  background: #cad2c5;
  margin: 5px;
  border-radius: 3px;
  transition: all 0.3s ease;
}

.burger {
  display: none;
}

/* Make from burger icon to X icon */
.toggle #line1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle #line2 {
  opacity: 0;
}

.toggle #line3 {
  transform: rotate(45deg) translate(-5px, -6px);
}

/* Animation for links */
@keyframes linkSlide {
  from {
    opacity: 0;
    transform: translateX(100px);
  }

  to {
    opacity: 1;
    transform: translateX(0px);
  }
}


/*BANNER*/
.banner {
  position: relative;
  background: linear-gradient(rgba(24, 25, 26, 0.4), rgba(24, 25, 26, 0.4)),
    url("../images/about/banner-img.JPG") center/cover no-repeat fixed;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#banner-text {
  font-size: 6rem;
  color: rgb(202, 210, 197);
  letter-spacing: 2px;
  text-shadow: 1px 1px 10px black;
  font-family: "Dancing Script", cursive;
}

/* Mobile */
@media screen and (max-width: 992px) {
  body {
    overflow-x: hidden;
  }

  .navbar-nav {
    position: absolute;
    height: calc(95vh - 80px);
    right: 0;
    width: 100%;
    top: 80px;
    background: #354f52;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: space-between;
    padding: 100px 0px;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.5s ease-in;
  }

  .nav-item,
  .nav-link {
    margin-right: 0;
    text-shadow: none;
  }

  .navbar-nav li a:hover {
    color: #354f52;
    background: #edf0f1;
    padding: 10px 20px;
    text-shadow: none;
  }

  .nav-item {
    opacity: 0;
  }

  .burger {
    display: block;
    cursor: pointer;
  }

  .navbar-nav.mobilenav-active {
    transform: translateX(0%);
    opacity: 0.96;
  }

  #navbutton {
    margin-left: 0;
  }

  #banner-text {
    font-size: 5rem;
  }
}


/*PERSONAL*/
.personal {
  background: #425057;
  margin: 0;
  padding: 50px;
  color: #EEF0F2;
  position: relative;
  line-height: 1.8;
  font-family: "Roboto Slab", serif;
}

.personal p {
  max-width: 1200px;
  margin: auto;
  font-size: 17px;
}

.about {
  background: #425057;
  padding: 20px 50px 50px 50px;
  color: #EEF0F2;
  line-height: 1.8;
  font-family: "Roboto Slab", serif;
}

.about-container {
  display: flex;
  max-width: 1200px;
  margin: auto;
}

.about-container h3 {
  font-family: "Poppins", sans-serif;
  text-align: center;
  font-weight: 600;
  color: #f5f5f5;
  margin: auto;
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
  letter-spacing: 1px;
  word-spacing: 1px;
}

.about-container p {
  text-align: justify;
  font-size: 17px;
}

.hobbies{
  margin-left: 50px;
}

.family{
  margin-right: 50px;
}

.about-container h3::before {
  content:"";
  display: block;
  width: 200px;
  height: 2px;
  background: #f5f5f5;
  position: absolute;
  left: 0;
  top: 50%;
  z-index: -1;
}

.about-container h3::after {
  content:"";
  display: block;
  width: 200px;
  height: 2px;
  background: #f5f5f5;
  position: absolute;
  right: 0;
  top: 50%;
  z-index: -1;
}

.about-container span{
  background: #425057;
  padding: 0 20px;
}

@media screen and (max-width: 900px) {
  .about-container {
    display: block;
  }

  .about {
    position: relative;
  }

  .about-container h3::before,
  .about-container h3::after {
    width: 50%;
  }

  .family,
  .hobbies {
    margin: auto;
  }

  .family {
    margin-bottom: 60px;
  }
}


/*TRANSITION*/
.transition {
  height: 50px;
  width: 100%;
  background: linear-gradient(#425057, #354f52);
}



/*FOOTER*/
footer {
  display: flex;
  flex-flow: row wrap;
  padding: 60px 50px 20px 50px;
  background: #2f3e46;
  line-height: 1.5;
  font-family: "Poppins", sans-serif;
}

.footer {
  margin: auto;
  position: relative;
}

.footer-container {
  position: absolute;
  margin: 0;
  padding: 0;
  top: 50%;
  transform: translateY(-50%);
}

#logo {
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-size: 2em;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  color: rgba(202, 210, 197, 1);
}

.footer > * {
  flex: 1 100%;
}

.footer-col-left {
  margin-right: 1.25em;
  margin-bottom: 2em;
}

.footer-col-right h4 {
  font-size: 20px;
  color: #cad2c5;
  margin-bottom: 35px;
  text-transform: capitalize;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  position: relative;
}

.footer-col-right h4::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  background: #e91e63;
  height: 2px;
  box-sizing: border-box;
  width: 50px;
}

.footer ul {
  list-style: none;
  padding-left: 0;
}

.footer-col-right ul li:not(:last-child) {
  margin-bottom: 10px;
}

.box li a,
.box li p {
  font-size: 16px;
  color: #f5f5f5;
  text-decoration: none;
  font-weight: 300;
  display: block;
  font-family: "Roboto Slab", serif;
  transition: all 0.3s ease;
}

.footer-col-right ul li a:hover {
  color: #cad2c5;
  padding-left: 10px;
}

.footer a {
  text-decoration: none;
}

.footer-col-right {
  display: flex;
  flex-flow: row wrap;
}

.footer-col-right > * {
  flex: 1 50%;
  margin-right: 1.25em;
}

.footer-row-bot {
  text-align: center;
  color: #cad2c5;
  padding-top: 45px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 14px;
}

.footer-col-left p {
  padding-right: 20%;
}

.footer-col-left .socials a {
  display: inline-block;
  height: 40px;
  width: 40px;
  background: #52796f;
  margin: 0 10px 10px 0;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  color: rgba(202, 210, 197, 1);
  transition: all 0.5s ease;
}

.socials {
  padding-top: 5px;
}

.footer-col-left .socials a:hover {
  background: rgba(202, 210, 197, 1);
  color: #52796f;
}

@media screen and (max-width: 780px) {
  footer {
    padding: 60px 10px 20px 10px;
  }
}
@media screen and (min-width: 700px) {
  .footer-col-right > * {
    flex: 1;
  }

  .footer-col-left {
    flex: 1 0px;
  }

  .footer-col-right {
    flex: 2 0px;
  }
}

@media screen and (max-width: 700px) {
  .footer {
    padding: 15px;
  }

  .footer-container {
    position: absolute;
    margin-top: 30px;
    padding: 0;
    top: 0;
    transform: translateY(0);
  }

  .footer-col-right {
    margin-top: 75px;
  }

  .footer-col-right h4 {
    margin-top: 50px;
  }
}

score 0 · Answer 1 · answered Jul 09 '21 at 15:16

0

Unless you keep the aspect ratio of the image you are not being able to keep the same image. Eventually if you keep the banner 100vh it will start cropping down on the horizontal axes. You can solve the issue (face not centered) with the background-image by defining a background-position. The example below the text will center the image on the X and Y axis. You can also lower the height so the image is keeping it ratio.

background-position: center center;

The issue with the overflow, there is probs an element outside of your viewport. Could you set up a code snippet for this?

answered Jul 09 '21 at 15:16

Kenneth

51
5

Hi! Thank you for the response. I tried your answer, but it doesn't seem to be working, I changed the position to center center, bottom left, and other positions but the image stays the same. I think the problem may have something to do with the overflow. But since I am still quite new to this , I am not quite sure on what you mean by an element outside my viewport . So, could you be more specific about what you mean by that? Sorry for the hassle and thanks! – brwysa Jul 09 '21 at 15:38
Can you provide a code snippet so we can see it in action? – Kenneth Jul 09 '21 at 21:16
Sorry, but I don't know what you mean by code snippet. Could you provide an example? Because all of the related code have been attached in my original post. Sorry, once again. – brwysa Jul 10 '21 at 06:56

score 0 · Answer 2 · answered Jul 10 '21 at 07:51

In this code snippet I provided I can't see any overflow, I might just have to test it out on my local machine. In the example below the image has position center, but also note the image that is provided is actually a portrait in the center of the image.

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montaga&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins&family=Roboto+Slab&display=swap");

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

button {
  outline: none !important;
}


/*NAVIGATION BAR*/
header {
  position: absolute;
  z-index: 10;
  width: 100%;
  padding: 25px 5%;
}

.navbar-nav {
  flex-direction: row;
}

.navbar-brand {
  font-family: "Oswald", sans-serif;
  font-size: 2em;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  color: rgba(202, 210, 197, 1);
  text-shadow: 1px 1px 3px black;
  margin-right: 0;
}

.navbar-brand:hover {
  color: rgba(202, 210, 197, 1);
}

.nav-item,
.nav-link {
  font-size: 1.05em;
  text-transform: uppercase;
  font-weight: 800;
  margin-right: 20px;
  color: #cad2c5;
  text-shadow: 1px 1px 5px black;
  font-family: "Montaga", serif;
  letter-spacing: 1px;
  transition: all 0.5s;
}

.nav-link:hover {
  background: #2f3e46;
  color: #cad2c5;
}

#navbutton {
  font-size: 1.05em;
  text-transform: capitalize;
  font-weight: 500;
  font-family: "Montaga", serif;
  letter-spacing: 1px;
  padding: 9px 25px;
  background: #cad2c5;
  border: none;
  border-radius: 50px;
  transition: all 0.5s;
  margin-left: 10px;
}

#navbutton:hover {
  background: #2f3e46;
  color: #cad2c5;
}

.burger div {
  width: 25px;
  height: 3px;
  background: #cad2c5;
  margin: 5px;
  border-radius: 3px;
  transition: all 0.3s ease;
}

.burger {
  display: none;
}

/* Make from burger icon to X icon */
.toggle #line1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle #line2 {
  opacity: 0;
}

.toggle #line3 {
  transform: rotate(45deg) translate(-5px, -6px);
}

/* Animation for links */
@keyframes linkSlide {
  from {
    opacity: 0;
    transform: translateX(100px);
  }

  to {
    opacity: 1;
    transform: translateX(0px);
  }
}


/*BANNER*/
.banner {
  position: relative;
  background: linear-gradient(rgba(24, 25, 26, 0.4), rgba(24, 25, 26, 0.4)),
    url("https://t3.ftcdn.net/jpg/02/22/85/16/360_F_222851624_jfoMGbJxwRi5AWGdPgXKSABMnzCQo9RN.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#banner-text {
  font-size: 6rem;
  color: rgb(202, 210, 197);
  letter-spacing: 2px;
  text-shadow: 1px 1px 10px black;
  font-family: "Dancing Script", cursive;
}

/* Mobile */
@media screen and (max-width: 992px) {
  body {
    overflow-x: hidden;
  }

  .navbar-nav {
    position: absolute;
    height: calc(95vh - 80px);
    right: 0;
    width: 100%;
    top: 80px;
    background: #354f52;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: space-between;
    padding: 100px 0px;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.5s ease-in;
  }

  .nav-item,
  .nav-link {
    margin-right: 0;
    text-shadow: none;
  }

  .navbar-nav li a:hover {
    color: #354f52;
    background: #edf0f1;
    padding: 10px 20px;
    text-shadow: none;
  }

  .nav-item {
    opacity: 0;
  }

  .burger {
    display: block;
    cursor: pointer;
  }

  .navbar-nav.mobilenav-active {
    transform: translateX(0%);
    opacity: 0.96;
  }

  #navbutton {
    margin-left: 0;
  }

  #banner-text {
    font-size: 5rem;
  }
}


/*PERSONAL*/
.personal {
  background: #425057;
  margin: 0;
  padding: 50px;
  color: #EEF0F2;
  position: relative;
  line-height: 1.8;
  font-family: "Roboto Slab", serif;
}

.personal p {
  max-width: 1200px;
  margin: auto;
  font-size: 17px;
}

.about {
  background: #425057;
  padding: 20px 50px 50px 50px;
  color: #EEF0F2;
  line-height: 1.8;
  font-family: "Roboto Slab", serif;
}

.about-container {
  display: flex;
  max-width: 1200px;
  margin: auto;
}

.about-container h3 {
  font-family: "Poppins", sans-serif;
  text-align: center;
  color: #f5f5f5;
  margin: auto;
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
  letter-spacing: 1px;
  word-spacing: 1px;
}

.about-container p {
  text-align: justify;
  font-size: 17px;
}

.hobbies{
  margin-left: 50px;
}

.family{
  margin-right: 50px;
}

.about-container h3::before {
  content:"";
  display: block;
  width: 200px;
  height: 2px;
  background: #f5f5f5;
  position: absolute;
  left: 0;
  top: 50%;
  z-index: -1;
}

.about-container h3::after {
  content:"";
  display: block;
  width: 200px;
  height: 2px;
  background: #f5f5f5;
  position: absolute;
  right: 0;
  top: 50%;
  z-index: -1;
}

.about-container span{
  background: #425057;
  padding: 0 20px;
}

@media screen and (max-width: 900px) {
  .about-container {
    display: block;
  }

  .about {
    position: relative;
  }

  .about-container h3::before,
  .about-container h3::after {
    width: 50%;
  }

  .family,
  .hobbies {
    margin: auto;
  }

  .family {
    margin-bottom: 60px;
  }
}


/*TRANSITION*/
.transition {
  height: 50px;
  width: 100%;
  background: linear-gradient(#425057, #354f52);
}



/*FOOTER*/
footer {
  display: flex;
  flex-flow: row wrap;
  padding: 60px 50px 20px 50px;
  background: #2f3e46;
  line-height: 1.5;
  font-family: "Poppins", sans-serif;
}

.footer {
  margin: auto;
  position: relative;
}

.footer-container {
  position: absolute;
  margin: 0;
  padding: 0;
  top: 50%;
  transform: translateY(-50%);
}

#logo {
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-size: 2em;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  color: rgba(202, 210, 197, 1);
}

.footer > * {
  flex: 1 100%;
}

.footer-col-left {
  margin-right: 1.25em;
  margin-bottom: 2em;
}

.footer-col-right h4 {
  font-size: 20px;
  color: #cad2c5;
  margin-bottom: 35px;
  text-transform: capitalize;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  position: relative;
}

.footer-col-right h4::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  background: #e91e63;
  height: 2px;
  box-sizing: border-box;
  width: 50px;
}

.footer ul {
  list-style: none;
  padding-left: 0;
}

.footer-col-right ul li:not(:last-child) {
  margin-bottom: 10px;
}

.box li a,
.box li p {
  font-size: 16px;
  color: #f5f5f5;
  text-decoration: none;
  font-weight: 300;
  display: block;
  font-family: "Roboto Slab", serif;
  transition: all 0.3s ease;
}

.footer-col-right ul li a:hover {
  color: #cad2c5;
  padding-left: 10px;
}

.footer a {
  text-decoration: none;
}

.footer-col-right {
  display: flex;
  flex-flow: row wrap;
}

.footer-col-right > * {
  flex: 1 50%;
  margin-right: 1.25em;
}

.footer-row-bot {
  text-align: center;
  color: #cad2c5;
  padding-top: 45px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 14px;
}

.footer-col-left p {
  padding-right: 20%;
}

.footer-col-left .socials a {
  display: inline-block;
  height: 40px;
  width: 40px;
  background: #52796f;
  margin: 0 10px 10px 0;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  color: rgba(202, 210, 197, 1);
  transition: all 0.5s ease;
}

.socials {
  padding-top: 5px;
}

.footer-col-left .socials a:hover {
  background: rgba(202, 210, 197, 1);
  color: #52796f;
}

@media screen and (max-width: 780px) {
  footer {
    padding: 60px 10px 20px 10px;
  }
}
@media screen and (min-width: 700px) {
  .footer-col-right > * {
    flex: 1;
  }

  .footer-col-left {
    flex: 1 0px;
  }

  .footer-col-right {
    flex: 2 0px;
  }
}

@media screen and (max-width: 700px) {
  .footer {
    padding: 15px;
  }

  .footer-container {
    position: absolute;
    margin-top: 30px;
    padding: 0;
    top: 0;
    transform: translateY(0);
  }

  .footer-col-right {
    margin-top: 75px;
  }

  .footer-col-right h4 {
    margin-top: 50px;
  }
}

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
      crossorigin="anonymous"
    />
    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
      crossorigin="anonymous"
    ></script>

    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <link href="./css/about-style.css" rel="stylesheet" />

    <title>Brian Wyann</title>
  </head>

  <body>


    <!--NAVIGATION BAR-->
    <header>
      <nav class="navbar navbar-expand-lg">
        <a class="navbar-brand navbar-left" href="index.html">BrianWyann</a>
        <ul class="navbar-nav navbar-light ml-lg-auto">
          <li class="nav-item active">
            <a class="nav-link" href="./index.html"
              >Home<span class="sr-only">(current)</span></a
            >
          </li>
          <li class="nav-item">
            <a class="nav-link" href="./about.html">About Me</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="./project.html">Projects</a>
          </li>
        </ul>

        <div class="burger navbar-center">
          <div id="line1"></div>
          <div id="line2"></div>
          <div id="line3"></div>
        </div>

        <a href="./contact.html" id="contact">
          <button id="navbutton">Contacts</button>
        </a>
      </nav>
    </header>


    <!--BANNER-->
    <section class="banner">
      <h1 id="banner-text">Who Am I?</h1>
    </section>

    <!--PERSONAL-->
    <div class="personal">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultricies vulputate auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac volutpat lacus, a porta tellus. Nullam accumsan, massa eget condimentum convallis, mauris nunc efficitur augue, in dapibus risus diam euismod lorem. Ut non venenatis magna. Duis eget est aliquam sapien pretium molestie id eget felis. Praesent bibendum ultrices libero. Quisque sodales nulla dui, id iaculis dui dignissim sed. Nam iaculis erat interdum quam tincidunt, Donec viverra dignissim felis, sit amet luctus lacus gravida a. Pellentesque eu dapibus turpis.
        </br></br>
        Sed accumsan ligula cursus. Nullam ut auctor velit, nec maximus mauris. Nullam fermentum volutpat lorem ut eleifend. Aenean facilisis et nisl eget euismod. Curabitur vitae ligula quis dolor cursus euismod ac eu tellus.Cras finibus, libero et molestie rutrum, lorem felis dapibus tellus, a vehicula nulla diam eu ante. Sed euismod leo ligula. Maecenas ut neque metus. Etiam placerat neque sed justo tempus, at fermentum eros ornare. Duis facilisis metus a turpis blandit, a mollis ipsum malesuada.
        </p>
      </div>

    <div class="about">
    <div class="about-container">

      <div class="family">
        <h3><span>My Family</span></h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis fermentum nibh. Maecenas elit ligula, efficitur in finibus a, pretium non ante. Mauris pharetra at libero vitae mollis. Aliquam erat volutpat. Suspendisse vehicula volutpat congue. Aenean commodo nibh efficitur, interdum nisi fermentum, ornare lacus. Donec ultricies orci at metus viverra.
        </p>
      </div>

      <div class="hobbies">
        <h3><span>My Hobbies</span></h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis fermentum nibh. Maecenas elit ligula, efficitur in finibus a, pretium non ante. Mauris pharetra at libero vitae mollis. Aliquam erat volutpat. Suspendisse vehicula volutpat congue. Aenean commodo nibh efficitur, interdum nisi fermentum, ornare lacus. Donec ultricies orci at metus
        </p>
      </div>

    </div>
    </div>


    <!--TRANSITION-->
    <div class="transition"></div>


    <!--FOOTER-->
    <footer class="footer">
      <div class="footer-col-left">
        <div class="footer-container">
          <a id="logobutton" href="index.html">
            <h4 id="logo">BrianWyann</h4>
          </a>

          <div class="socials">
            <a href="https://www.facebook.com/" target="blank"
              ><i class="fab fa-facebook-f"></i
            ></a>
            <a href="https://twitter.com/" target="blank"
              ><i class="fab fa-twitter"></i
            ></a>
            <a href="https://www.instagram.com/" target="blank"
              ><i class="fab fa-instagram"></i
            ></a>
            <a href="https://www.linkedin.com/feed/" target="blank"
              ><i class="fab fa-linkedin-in"></i
            ></a>
          </div>
        </div>
      </div>

      <ul class="footer-col-right">
        <li>
          <h4>Myself</h4>

          <ul class="box">
            <li><a href="./index.html">Home</a></li>
            <li><a href="./about.html">About</a></li>
            <li><a href="./project.html">Projects</a></li>
            <li><a href="./contact.html">Contacts</a></li>
          </ul>
        </li>

        <li class="mooc">
          <h4>MOOCs</h4>

          <ul class="box">
            <li><a href="https://www.edx.org/" target="blank">edX</a></li>
            <li>
              <a href="https://www.coursera.org/" target="blank">Coursera</a>
            </li>
            <li>
              <a href="https://www.futurelearn.com/" target="blank"
                >FutureLearn</a
              >
            </li>
            <li>
              <a href="https://cognitiveclass.ai/" target="blank"
                >CognitiveClass</a
              >
            </li>
          </ul>
        </li>

        <li>
          <h4>Address</h4>
          <ul class="box">
            <li>
              <p>
                C 29, Perumahan Sunter Mediterania, 14340, North Jakarta City,
                Jakarta, Indonesia
              </p>
            </li>
          </ul>
        </li>
      </ul>
      <div class="footer-row-bot">
        <p>All right reserved by &copy;wyannbrian 2020</p>
      </div>
    </footer>

    <script src="./js/app.js"></script>
  </body>
</html>

score 0 · Accepted Answer · answered Jul 10 '21 at 10:58

so I found out that the overflow is indeed the problem. But first I want to thank Kenneth for his response which ultimately helped me to find the solution.

The solution is to remove the overflow-x. But since mobile browsers ignore body and html tag, I needed to add a <div class="site"> right below the body element and close it right before the body element closes. And then after adding it. All I needed to do was add this to the css.

.site {
    overflow-x: hidden;
    /* Unnecessary IMHO, uncomment next line to force hidden behavior */
    /* overflow-x: hidden !important; */
    /* Additional tunning proposed by the community */
    position: relative;
    width: 100%;
    }

P.S: I found the answer on another post (Overflow-x:hidden; on mobile device not working). The answer is written by Adrià.

Background image position is weird in actual mobile view, but normal in desktop mobile view

3 Answers3