Reputation:

My page is scrolling to right. Why is it happening?

I'm building a web page and working in the layout for small screens (max-width: 600px). When the screen gets narrow, the page gets a bit of horizontal scroll, as you can see in the code snippet, but it is unexpected for me. I am not finding anything wider than the viewport's width in my code. Why is there that scroll?

/* CSS from index_default.css */

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Doppio+One|Open+Sans&display=swap');
html, body, *, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Open Sans', sans-serif;
}
h2, h3{
    margin-top: 10px;
    margin-bottom: 10px;
}
a{
    text-decoration: none;
    transition: 0.2s linear;
}
header{
    background-color: rgb(93, 158, 76);
    display: flex;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
}
header h1{
    font-family: 'Doppio One', cursive;
    color: rgb(214, 245, 210);
}
nav a{
    color: rgb(230, 245, 229);
}
#menu{
    width: 30px;
}
#firstsection div a{
    font-weight: bold;
    border: 2px solid rgb(47, 119, 27);
    padding: 13px 30px;
    font-size: 16.5px;
    color: rgb(47, 119, 27);
}
#firstsection div a:hover{
    color: rgb(133, 163, 131);
    border: 2px solid rgb(133, 163, 131);
}
#lastsection img{
    display: block;
    margin-right: auto;
    margin-left: auto;
}
#lastsection div a:visited{
    color: blue;
}
footer{
    background-color: rgb(93, 158, 76);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    color: rgb(214, 245, 210);
}

/* CSS from index_small.css */

@charset "UTF-8";
body{
    width: 100vw;
    text-align: center;
}
header{
    padding-right: 10px;
    padding-left: 10px;
}
header img:first-of-type{
    width: 40px;
    margin-right: 5px;
}
header ul{
    display: none;
}
#menu{
    margin-left: 15vh;
}
#firstsection{
    background-color: rgb(220, 255, 211);
    height: 40vh;
    padding: 10% 20px 0;
    margin-bottom: 8%;
}
#firstsection div{
    margin-bottom: 30px;
}
#firstsection a{
    position: relative;
    top: 35px;
}
#middlesection{
    margin: 0 5vw;
}
#textboxes div{
    margin-bottom: 8%;
}
#lastsection img{
    width: 90%;
    margin-top: 8vh;
}
#lastsection div{
    position: relative;
    bottom: 18.5vh;
}
#lastsection div h2{
    font-size: 1.2rem;
}
footer img{
    width: 40px;
    margin-right: 8px;
}

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <title>Finances | Manage your money easily</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Control you spending and manage your money easily. Your finances by the short hairs.">
        <meta name="author" content="Bruno M. B. Sdoukos">
        <meta name="keywords" content="finances, managing money, spending control">
        <link rel="stylesheet" type="text/css" href="index_default.css">
        <link rel="stylesheet" type="text/css" media="screen and (max-width: 600px)" href="index_small.css">
        <link rel="stylesheet" type="text/css" media="screen and (min-width: 1500px)" href="index_large.css">
    </head>
    <body>
        <header>
            <a href="index.html"><img src="Images/icons8-fund-accounting-80.png"></a>
            <a href="index.html"><h1>Finances</h1></a>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact us</a></li>
                    <li><a href="#">Register</a></li>
                    <li><a href="#">Login</a></li>
                </ul>
                <a href="#"><img src="Images/icons8-menu-50.png" id="menu"></a>
            </nav>
        </header>
        <main>
            <section id="firstsection">
                <div>
                    <h1>Manage your money easily, anywhere, anytime.</h1>
                    <a href="#">Get started</a>
                </div>
            </section>
            <section id="middlesection">
                <div id="textboxes">
                    <div>
                        <img src="Images/icons8-increase-64.png">
                        <h3>Concrete data</h3>
                        <p>Simple but concrete data that are the answer to all the quesions about your current money, spending and.</p>
                    </div>
                    <div>
                        <img src="Images/icons8-navigation-toolbar-left-filled-50 (1).png">
                        <h3>Easy interface</h3>
                        <p>An interface easy to use, made to you who want to manage your money faster and with no problems.</p>
                    </div>
                    <div>
                        <img src="Images/icons8-natural-user-interface-2-filled-50.png">
                        <h3>Fast access</h3>
                        <p>No complications that make you lose time. Just some clicks and done, you are in Finances, with all you need.</p>
                    </div>
                </div>
            </section>
            <section id="lastsection">
                <img src="Images/board-1362851_1280.png">
                <div>
                    <h2>Register now and enjoy<br>the best of Finances.</h2>
                    <a href="#">Create an account</a>
                </div>
            </section>
        </main>
        <footer>
            <img src="Images/icons8-fund-accounting-80.png">
            <div>
                <p>A work of Bruno Sdoukos.</p>
            </div>
        </footer>
    </body> 
</html>

Upvotes: 1

Answers (3)

AdityaSrivast

Reputation: 1084

It is the width: 100vw given to body which is causing the scroll. This may be happening as you might have given left or right margin to other sections of the page or assigned widths such that it exceeds the viewport. Now you can inspect them one by one and rectify.
Alternatively, you can adopt any one of these styles for your body tag in addition to what you're using:

Get rid of width: 100vw or
Add max-width:100vw or
Add overflow-x: hidden

Adopting any one of these should fix your issue. Cheers!!

Upvotes: 1

Johannes

Reputation: 67778

The 100vw width of the body span the whole viewport width. If a vertical scrollbar appears (which is almost always the case), this scrollbar covers / cuts off a small part of those 100vw, so the body actually has to become narrower than 100vw to be fully visible - like "100vw minus the width of the vertical scrollbar". Otherwise a * horizontal* scrollbar will appear (like in your example).

To avoid this, you can simply erase width: 100vw from body, which will set the width to the default auto and will work as expected:

/* CSS from index_default.css */

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Doppio+One|Open+Sans&display=swap');
html, body, *, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Open Sans', sans-serif;
}
h2, h3{
    margin-top: 10px;
    margin-bottom: 10px;
}
a{
    text-decoration: none;
    transition: 0.2s linear;
}
header{
    background-color: rgb(93, 158, 76);
    display: flex;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
}
header h1{
    font-family: 'Doppio One', cursive;
    color: rgb(214, 245, 210);
}
nav a{
    color: rgb(230, 245, 229);
}
#menu{
    width: 30px;
}
#firstsection div a{
    font-weight: bold;
    border: 2px solid rgb(47, 119, 27);
    padding: 13px 30px;
    font-size: 16.5px;
    color: rgb(47, 119, 27);
}
#firstsection div a:hover{
    color: rgb(133, 163, 131);
    border: 2px solid rgb(133, 163, 131);
}
#lastsection img{
    display: block;
    margin-right: auto;
    margin-left: auto;
}
#lastsection div a:visited{
    color: blue;
}
footer{
    background-color: rgb(93, 158, 76);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    color: rgb(214, 245, 210);
}

/* CSS from index_small.css */

@charset "UTF-8";
body{
    text-align: center;
}
header{
    padding-right: 10px;
    padding-left: 10px;
}
header img:first-of-type{
    width: 40px;
    margin-right: 5px;
}
header ul{
    display: none;
}
#menu{
    margin-left: 15vh;
}
#firstsection{
    background-color: rgb(220, 255, 211);
    height: 40vh;
    padding: 10% 20px 0;
    margin-bottom: 8%;
}
#firstsection div{
    margin-bottom: 30px;
}
#firstsection a{
    position: relative;
    top: 35px;
}
#middlesection{
    margin: 0 5vw;
}
#textboxes div{
    margin-bottom: 8%;
}
#lastsection img{
    width: 90%;
    margin-top: 8vh;
}
#lastsection div{
    position: relative;
    bottom: 18.5vh;
}
#lastsection div h2{
    font-size: 1.2rem;
}
footer img{
    width: 40px;
    margin-right: 8px;
}

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <title>Finances | Manage your money easily</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Control you spending and manage your money easily. Your finances by the short hairs.">
        <meta name="author" content="Bruno M. B. Sdoukos">
        <meta name="keywords" content="finances, managing money, spending control">
        <link rel="stylesheet" type="text/css" href="index_default.css">
        <link rel="stylesheet" type="text/css" media="screen and (max-width: 600px)" href="index_small.css">
        <link rel="stylesheet" type="text/css" media="screen and (min-width: 1500px)" href="index_large.css">
    </head>
    <body>
        <header>
            <a href="index.html"><img src="Images/icons8-fund-accounting-80.png"></a>
            <a href="index.html"><h1>Finances</h1></a>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact us</a></li>
                    <li><a href="#">Register</a></li>
                    <li><a href="#">Login</a></li>
                </ul>
                <a href="#"><img src="Images/icons8-menu-50.png" id="menu"></a>
            </nav>
        </header>
        <main>
            <section id="firstsection">
                <div>
                    <h1>Manage your money easily, anywhere, anytime.</h1>
                    <a href="#">Get started</a>
                </div>
            </section>
            <section id="middlesection">
                <div id="textboxes">
                    <div>
                        <img src="Images/icons8-increase-64.png">
                        <h3>Concrete data</h3>
                        <p>Simple but concrete data that are the answer to all the quesions about your current money, spending and.</p>
                    </div>
                    <div>
                        <img src="Images/icons8-navigation-toolbar-left-filled-50 (1).png">
                        <h3>Easy interface</h3>
                        <p>An interface easy to use, made to you who want to manage your money faster and with no problems.</p>
                    </div>
                    <div>
                        <img src="Images/icons8-natural-user-interface-2-filled-50.png">
                        <h3>Fast access</h3>
                        <p>No complications that make you lose time. Just some clicks and done, you are in Finances, with all you need.</p>
                    </div>
                </div>
            </section>
            <section id="lastsection">
                <img src="Images/board-1362851_1280.png">
                <div>
                    <h2>Register now and enjoy<br>the best of Finances.</h2>
                    <a href="#">Create an account</a>
                </div>
            </section>
        </main>
        <footer>
            <img src="Images/icons8-fund-accounting-80.png">
            <div>
                <p>A work of Bruno Sdoukos.</p>
            </div>
        </footer>
    </body> 
</html>

Upvotes: 0

Kamil Pikula

Reputation: 23

Change to css file

body{
    width: 100vw;
    text-align: center;
}

body{
    width: 100%;
    text-align: center;
}

Upvotes: 2

My page is scrolling to right. Why is it happening?

Answers (3)

Related Questions