CODEWITHSUNDEEP
htmlcssbootstrap-4
DIY AND IOT CREATOR
DIY AND IOT CREATOR

Reputation: 17

Extra space is appearing in right of my website

I am making a website with bootstrap and simple css

But there's some extra appearing on right of website, I have tried to solve it with overflow-x hidden it solved my problem, but It makes a bad effect on my bootstrap navbar, so I decided not to apply this fix.

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

.cool-link::after {
  content: '';
  display: block;
  width: 0;
  height: 3px;
  background: white;
  transition: width .3s;
  border-radius: 3px;
}

.cool-link:hover::after {
  width: 100%;
  transition: width .3s;
}

.static-cool-link::after {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  background: white;
  transition: width .3s;
  border-radius: 3px;
}

.about {
  width: 100vw;
  height: 100vh;
  background-color: orangered;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
}
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="style.css">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>About - GlobalAdmissionCycle</title>
</head>

<body>

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">GlobalAdmissionCycle.com</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mx-auto mb-2 mb-lg-0">

                    <li class="nav-item">
                        <a class="nav-link active static-cool-link" href="#">About </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#">|</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active cool-link" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active cool-link" aria-current="page" href="#">Contact Us</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active cool-link" aria-current="page" href="#">Overseas</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active cool-link" aria-current="page" href="#">Colleges</a>
                    </li>
                </ul>
                <form class="d-flex">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
            </div>
        </div>
    </nav>
    
    <section class="about">
    </section>
    
    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

</body>
</html>

this is my html code -

Please someone tell me why is this extra space is appearing in my website .

Upvotes: 0

Views: 144

Answers (5)

Sunil
Sunil

Reputation: 411

Horizontal scrollbar (extra space in the right of the page) is appearing because width:100vw is included vertical scrollbar width.

Viewport-percentage Lengths Spec

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist. Note that the initial containing block’s size is affected by the presence of scrollbars on the viewport.

Solution 1

Remove width:100vw and add width:100% to .about

Solution 2

add max-width:100%; to .about

Solution 3

Add overflow-x:hidden to body/parent container

Upvotes: 1

shotgun02
shotgun02

Reputation: 784

change width to 100% in .about class. You can also add css to scrollbar to have a better look

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

.cool-link::after {
  content: '';
  display: block;
  width: 0;
  height: 3px;
  background: white;
  transition: width .3s;
  border-radius: 3px;
}

.cool-link:hover::after {
  width: 100%;
  transition: width .3s;
}

.static-cool-link::after {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  background: white;
  transition: width .3s;
  border-radius: 3px;
}

.about {
  width: 100%;
  height: 100vh;
  background-color: orangered;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
}

/* css for scrollbar*/

.sbar::-webkit-scrollbar-track
{
    border-radius: 5px;
    background-color: #fff;
}

.sbar::-webkit-scrollbar
{
    width: 6px;
    background-color: #fff;
}

.sbar::-webkit-scrollbar-thumb
{
    border-radius: 6px;
    -webkit-box-shadow: inset 0 0 4px rgba(190, 52, 8, 1);
    background-color: orangered;
}
.scrollbar
{
scrollbar-face-color: #e36714;
scrollbar-highlight-color: #fff;
scrollbar-3dlight-color: #fff;
scrollbar-darkshadow-color: #fff;
scrollbar-shadow-color: #fff;
scrollbar-arrow-color: #fff;
scrollbar-track-color: #fff;
-ms-overflow-style: none;
overflow-y: scroll;
}
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="style.css">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>About - GlobalAdmissionCycle</title>
</head>

<body>

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">GlobalAdmissionCycle.com</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mx-auto mb-2 mb-lg-0">

                    <li class="nav-item">
                        <a class="nav-link active static-cool-link" href="#">About </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#">|</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active cool-link" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active cool-link" aria-current="page" href="#">Contact Us</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active cool-link" aria-current="page" href="#">Overseas</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active cool-link" aria-current="page" href="#">Colleges</a>
                    </li>
                </ul>
                <form class="d-flex">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
            </div>
        </div>
    </nav>
    
    <section class="about">
    </section>
    
    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

</body>
</html>

Upvotes: 0

mehmetx
mehmetx

Reputation: 860

change your width to 100% from 100vw in about class

.about {
    width: 100%;
    //...
}

Upvotes: 0

nzcnef
nzcnef

Reputation: 1

Extra space due to you use "height: 100vh" with navbar

**.about {
  width: 100%;
  height: calc(100vh - 59px);
  background-color: orangered;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
}**

Upvotes: 0

Debsmita Paul
Debsmita Paul

Reputation: 1460

width: 100vw on .about is causing the extra white space on the right of your website.

You can change it to width: 100% which removes the issue.

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

.cool-link::after {
  content: '';
  display: block;
  width: 0;
  height: 3px;
  background: white;
  transition: width .3s;
  border-radius: 3px;
}

.cool-link:hover::after {
  width: 100%;
  transition: width .3s;
}

.static-cool-link::after {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  background: white;
  transition: width .3s;
  border-radius: 3px;
}

.about {
  width: 100%; /* <------------- change this */
  height: 100vh;
  background-color: orangered;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
}
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="style.css">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>About - GlobalAdmissionCycle</title>
</head>

<body>

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">GlobalAdmissionCycle.com</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mx-auto mb-2 mb-lg-0">

                    <li class="nav-item">
                        <a class="nav-link active static-cool-link" href="#">About </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#">|</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active cool-link" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active cool-link" aria-current="page" href="#">Contact Us</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active cool-link" aria-current="page" href="#">Overseas</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active cool-link" aria-current="page" href="#">Colleges</a>
                    </li>
                </ul>
                <form class="d-flex">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
            </div>
        </div>
    </nav>
    
    <section class="about">
    </section>
    
    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

</body>
</html>

Upvotes: 1

Related Questions