CODEWITHSUNDEEP
htmlcssbootstrap-5
Mohadeseh
Mohadeseh

Reputation: 366

how to remove horizental scroll in html css

I have a simple web page template.my problem is that, my web page has a horizontal scroll. But I want remove it. This is my code:

 <html lang="FA">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body dir="rtl">
    <section class="bg-blue">
        <div class="container">
            <div class="text-center">
                <img src="logo.png" alt="">
                <h2 class="logo-text d-inline-block p-4 ps-0">My logo text</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <img src="" alt="">
            </div>
        </div>
    </section>
    <section class="bg-secondary">
        <div class="container">
            <div class="text-center" style="height: 800px;">
                <div class="search-container">
                    <div class="search-form">
                        <input type="text" class="form-control search-field w-50" placeholder="search">
                    </div>
                    
                </div>
            </div>
        </div>
    </section>

    <footer class="bg-yellow">
        <div class="container">
          
        </div>
    </footer>
</body>
</html>

This is screen shot of result:

this is my result:

Any solution?

Upvotes: 0

Views: 75

Answers (3)

Parit Sawjani
Parit Sawjani

Reputation: 908

overflow: hidden; is fine to use. But I suggest looking at your markup. Bootstrap adds a margin-left & margin-right to the row class. In this case margin-right is the culprit.

Bootstrap Row Class

Try it like this:

Rearranged Markup:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<section class="bg-blue">
  <div class="container">
    <div class="row">
      <div class="text-center">
        <img src="logo.png" alt="">
        <h2 class="logo-text d-inline-block p-4 ps-0">My logo text</h2>
      </div>
    </div>
    <div class="col-12">
      <img src="" alt="">
    </div>
  </div>
</section>
<section class="bg-secondary">
  <div class="container">
    <div class="text-center" style="height: 800px;">
      <div class="search-container">
        <div class="search-form">
          <input type="text" class="form-control search-field w-50" placeholder="search">
        </div>

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

<footer class="bg-yellow">
  <div class="container">

  </div>
</footer>

Original Markup:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<section class="bg-blue">
  <div class="container">
    <div class="text-center">
      <img src="logo.png" alt="">
      <h2 class="logo-text d-inline-block p-4 ps-0">My logo text</h2>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <img src="" alt="">
    </div>
  </div>
</section>
<section class="bg-secondary">
  <div class="container">
    <div class="text-center" style="height: 800px;">
      <div class="search-container">
        <div class="search-form">
          <input type="text" class="form-control search-field w-50" placeholder="search">
        </div>

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

<footer class="bg-yellow">
  <div class="container">

  </div>
</footer>

Upvotes: 2

randomcoder66785
randomcoder66785

Reputation: 68

Try setting the body css using the overflow-x property for horizontal scrollbars like this:

.body{
overflow-x:hidden;
}

Upvotes: 3

shotgun02
shotgun02

Reputation: 784

put the class="row" div inside container div

<div class="container">
        <div class="text-center">
            <img src="logo.png" alt="">
            <h2 class="logo-text d-inline-block p-4 ps-0">My logo text</h2>
        </div>
    
    <div class="row">
        <div class="col-12">
            <img src="" alt="">
        </div>
    </div>
</div>

Upvotes: 0

Related Questions