htmlcsstwitter-bootstrapresponsiveness

Why is there some overflow in my webpage when viewed on mobile phone?

I am trying to make a responsive webpage using bootstrap. Initially I designed the site using bootstrap 4 by mistake and when viewed on mobile phones in that version I had the same problem. But I couldn't get the navbar to work as expected on small screens but then my dumb self realized I was using bootstrap 4 links with bootstrap 5 classes so i updated the links and got the navbar working somewhat as expected but the overflow issue persists.

I tried setting overflow-x: hidden but it just wouldn't work even by using media queries. I am pretty sure I have messed up big time in the way i styled the very first section.

And here are some pictures:

This view when i don't scroll right

The view when i do scroll right

Please note that these screenshots were taken with the help of chrome developer tools while emulating a mobile phone of resolution 360X800px.

I will be happy to receive any kind of help you can offer. Please let me know if you spot anything which could be causing this issue.

Below is the html snippet for that particular section along with some images for you to understand the issue better.

Here's the relevant css code i used:

  #intro {
  background-color: #f3efe0;
  max-width: 100vw !important;
}

.htext {
  color: #8f8f8f;
}

.cphrase {
  font-family: "Martian Mono", monospace;
  font-size: 4rem;
  padding: 3% 5%;
  padding-top: 5%;
  font-weight: bolder;
}

.cphrase h1 {
  font-size: 3.5rem;
}

.cphrase p {
  font-size: 1rem;
  font-weight: lighter;
  color: #8f8f8f;
  display: flex;
  padding: 4% 0;
}

.nav-item {
  padding: 5% 10%;
  text-decoration: none;
}

.nav-item a {
  color: #8f8f8f;
  text-decoration: none;
  position: relative;
}

.nav-item a::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  height: 2px;
  background-color: #282a3a;
  transition: 0.2s ease-in-out;
  text-decoration: none;
}

.nav-item a:hover::after {
  width: 100%;
  text-decoration: none;
  color: #282a3a;
}

.navbar {
  text-align: center;
  position: relative;
  left: 17%;
}

.navbar-brand {
  color: #282a3a !important;
  margin-top: 10px;
  font-weight: bold;
  position: relative;
  right: 10%;
  margin-top: 2%;
  border: 3px solid #282a3a;
  scale: 1.5;
}

.my-img {
  margin-left: 9%;
  padding: 3% 2%;
  overflow: hidden;
}

.my-img img {
  border-radius: 15%;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.btn {
  background-color: black;
  color: white;
  width: 120px;
}

@media (max-width: 767px) {
  body {
    overflow-x: hidden;
  }
  #intro {
    margin: auto auto;
  }
  .fa-solid {
    margin: 10px auto;
  }
  .loc p {
    margin-bottom: 30px;
  }
  .col-sm-12 {
    text-align: center;
  }
  .cphrase h1 {
    font-size: 2.5rem;
  }
  .my-img {
    align-items: center;
    position: relative;
    margin: 4% auto;
    margin-bottom: 10%;
    max-width: 80%;
  }
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<section id="intro">
  <header>
    <nav class="navbar navbar-expand-lg">
      <div class="container-fluid">
        <a class="htext navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
            <a class="nav-link" href="#">Features</a>
            <a class="nav-link" href="#">Pricing</a>
            <a class="nav-link disabled">Disabled</a>
          </div>
        </div>
      </div>
    </nav>
  </header>
  <div class="row">
    <div class="col-lg-4 col-md-4 col-sm-12 cphrase">
      <h1>Finally get yourself that website you need!!</h1>
      <p>
        <br />I am a front-end developer and have been working on exciting projects for individuals and companies across the globe.
      </p>
      <button class="btn">Let's talk</button>
    </div>
    <div class="col-lg-6 col-md-4 col-sm-8 my-img">
      <img src="images/Me.jpg" class="img-fluid w-100 mx-auto" alt="" />
    </div>
  </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

Solution

  • Your layout does have overflow on desktop. The main issue is that your CSS is very heavy-handed, working against the library instead of with it. You're off to a good start, but you're doing more work than you'd need to.

    I'm not sure exactly what layout you're after, but here are some tips.

    1. Rows should always be inside containers. Your body row was overflowing due to its negative margins, which are supposed to be offset by a container.
    2. Don't put things like max-width on a Bootstrap layout. That's already handled by the library if you use it correctly. It just causes problems later and clutters your CSS.
    3. Don't use positioning rules on primary Bootstrap elements. A 17% left rule throws your navbar off the screen, causing all manner of chaos. If you want your logo shifted, do that instead, but use margin, not positioning.
    4. Don't apply unrelated styles globally to primary Bootstrap classes. Instead, use a specific additional class. For example, instead of applying text centering to .col-sm-12 in a media query, use text-sm-center on specific columns (or an additional custom class). Another example is setting paragraphs to flex layout. Paragraphs shouldn't be structural elements to begin with, since their purpose is to contain text ("phrasing content") only.
    5. Get to know your layout library well so that you're aware of what it offers. You make life much more difficult by reinventing wheels that it already provides. Skim every page in the docs for familiarity. Noteworthy pages for your purposes are sizing, border radius, text alignment, positioning, background color, and flexbox utilities. They all offer classes to replace your custom styles and dramatically reduce the length of your stylesheet.
    6. Consider using Bootstrap's units for margin and padding (via spacing classes). It's a bit unintuitive at first to work with REM units, but it actually works well. You can eliminate a lot of custom CSS that way.
    7. Look at overriding theme color variables rather than putting color on CSS classes. This results in cleaner CSS and keeps your palette consistent across your site, which looks more professional.
    8. Don't use line breaks for spacing. That's not their purpose. Use margin or padding. Bootstrap offers plenty of spacing classes, or create custom classes following the same naming convention.
    9. Put proper alt text on your images. It serves an important purpose for many users. A front-end developer should make accessibility (usability for all) a priority.

    #intro {
  background-color: #f3efe0;
}

.htext {
  color: #8f8f8f;
}

.cphrase {
  font-family: "Martian Mono", monospace;
  font-size: 4rem;
  padding: 3% 5%;
  padding-top: 5%;
  font-weight: bolder;
}

.cphrase h1 {
  font-size: 3.5rem;
}

.cphrase p {
  font-size: 1rem;
  font-weight: lighter;
  color: #8f8f8f;
  padding: 4% 0;
}

.navbar-brand {
  color: #282a3a !important;
  margin-top: 10px;
  font-weight: bold;
  margin-top: 2%;
  border: 3px solid #282a3a;
  scale: 1.5;
}

.my-img {
  margin-left: 9%;
  padding: 3% 2%;
  overflow: hidden;
}

.my-img img {
  border-radius: 15%;
  object-fit: cover;
}

.btn.w-120px {
  width: 120px;
}

@media (max-width: 767px) {
  body {
    overflow-x: hidden;
  }
  .fa-solid {
    margin: 10px auto;
  }
  .loc p {
    margin-bottom: 30px;
  }
  .cphrase h1 {
    font-size: 2.5rem;
  }
  .my-img {
    margin: 4% auto;
    margin-bottom: 10%;
    max-width: 80%;
  }
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<section id="intro" class="mx-auto my-auto">
  <header>
    <nav class="navbar navbar-expand-lg text-center">
      <div class="container-fluid">
        <a class="htext navbar-brand ms-2" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
            <a class="nav-link" href="#">Features</a>
            <a class="nav-link" href="#">Pricing</a>
            <a class="nav-link disabled">Disabled</a>
          </div>
        </div>
      </div>
    </nav>
  </header>

  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-4 col-md-4 col-sm-12 cphrase">
        <h1>Finally get yourself that website you need!!</h1>
        <p class="d-flex mt-2">
         I am a front-end developer and have been working on exciting projects for individuals and companies across the globe.
        </p>
        <button class="btn bg-dark text-white w-120px">Let's talk</button>
      </div>
      <div class="col-lg-6 col-md-4 col-sm-8 my-img align-items-center">
        <img src="https://via.placeholder.com/300" class="img-fluid w-100 h-100 mx-auto" alt="portrait of me" />
      </div>
    </div>
  </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>