CODEWITHSUNDEEP
htmlcss
Leviathan_the_Great
Leviathan_the_Great

Reputation: 448

unknown reason for html body overflowing

so I'm building a site for a class and i have a unexpected probalem with the css. at smaller sizes the body seems to expand beyond the viewport. Having set the body width to be 100vw and 100% with nothing changing, I can't see why this would be happening?

you might have to copy-paste the snippet into a codepen. Stack wouldn't let me link to a codepen :(

anyways anything you can tell me to fix would help!

body{
    
    width:100vw;
    margin:0;
    padding:0;

        
}
.page-wrapper{
    width:100%;
    height:100%;

    display: grid;
    grid-template-columns: 0.5fr repeat(3, 2fr) 0.5fr;
    grid-template-rows: auto 0em repeat(2, auto);
    grid-template-areas: "header header header header header"
                         ". . . . ."
                         ". main main main ."
                         "footer footer footer footer footer";
}

.header{
    display:flex;
    position:relative;

    align-items: center;

    flex-direction:column;



    height:80vh;
    grid-area: header;

    color:white
}

.navbar{ 
    display: flex;
    
    margin-top:8%;

    width:70%;
    
    
    justify-content: center;
}


.nav-item{
    font-size: 2rem;
    margin: 0em 0.2em;
}

.dot{
    margin-right: 0.15em;
}
.dot.first, .dot.last{
    
}


.title-welcome{
    margin-top:1.5em;
    padding:0 1em;
    font-size:3rem;
    text-align: center;
}



.header_video-wrapper{
    grid-area: header;
    
    height:100%;
    width:100%;
    overflow:none;
}

.header_video-overlay{
   opacity:0.4;
   position:absolute;
   width:100%;
   height:100%; 
}

.header_video{
    position:absolute;
}


.main_content{
    grid-area: main;
    height:auto;

    /* adds a break between sections */
    padding-top:2em;
}
.footer{
    height:4rem;
    grid-area:footer;
}

/*placeholder classes are just for grid demonstration*/
.placeholder{
    width:100%;
    background-color: grey;
}


@media screen and (min-width:768px){
    

    .page_container{

        grid-template-columns: 0.5fr repeat(3, 2fr) 0.5fr;
        grid-template-rows: repeat(3, auto) 14rem;
        grid-template-areas:"header header header header header header header header"
                            ". carousel carousel carousel carousel carousel carousel ."
                            ". main main main main main main ."
                            "footer footer footer footer footer footer footer footer";

    }


    .header{
        height: 45vh
    }

    .navbar{
    
    }

    .nav-item{
            
    }

    .dot.first, .dot.last{
        /* display:none; */
    }

    .main_content{

    }

    .footer{

    }
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Truro Multicultural Festival</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon" />
    <link rel="stylesheet" href="styles-index.css" type="text/css" type="text/css" />
</head>

<body>
    <div class="page-wrapper">
        <div class="header">
            <nav class="navbar">
                <div class="nav-item">
                    <div>
                        <span class="dot first">•</span>
                        <a href="" class="page_link">Home</a>
                    </div>
                </div>
                <div class="nav-item">
                    <div>
                        <span class="dot">•</span>
                        <a href="/about" class="page_link">About</a>
                    </div>
                </div>
                <div class="nav-item">
                    <div>
                        <span class="dot">•</span>
                        <a href="/events" class="page_link">Events</a>
                    </div>
                </div>
                <div class="nav-item">
                    <div>
                        <span class="dot">•</span>
                        <a href="/contact" class="page_link">Contact</a>
                        <span class="dot last">•</span>
                    </div>
                </div>
            </nav>
            <h1 class="title-welcome">
                Welcome To The Truro Multicultural Festival
            </h1>
        </div>
        <div class="header_video-wrapper" preload="none">
            <div class="header_video-overlay"></div>
            <video class="header_video" src="media/header-video.webm"></video>
        </div>


        <main class="main_content placeholder"></main>
        <footer class="footer placeholder"></footer>
    </div>
</body>

</html>

Upvotes: 1

Views: 326

Answers (2)

iPhoenix
iPhoenix

Reputation: 737

You should take a look at the overflow: css property to change how your text wraps, the text not wrapping is causing the element to expand larger than expected.

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

Upvotes: 0

terraelise
terraelise

Reputation: 3199

The content (the text of the four links) doesn't break into new lines: when they are all in one line they are certainly rather wide and that gives your HTML content a wider width than the browser window.

Either let the content fit (smaller text), wrap the content at thinner widths (media query), or hide overflow content by adding overflow: hidden to .page-wrapper (or .header).

Upvotes: 1

Related Questions