Html Question posted in
Some basic documentation can be found here.

Html – My website is overflowing in splitted windows

If I split or change my window size the website looks terrible. I want it to look like a normal full screen website but also if I change my window size. Also I want it to look full sized on phone too but it also overflows on phone.

Here is my code html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
<div class="curso-dot" data-cursor-dot></div>
<div class="cursor-outline" data-cursor-outline></div>

<script src="./script.js"></script>

    <section>
        <img src="sun.png" id="icon">
        <script>

            var icon = document.getElementById("icon");

            icon.onclick = function(){
                document.body.classList.toggle("light-theme");
                if(document.body.classList.contains("light-theme")){
                    icon.src = "moon.png";
                }else{
                    icon.src = "sun.png";
                }
            }
        </script>
    </section>
    <section>
        <h1 style="text-align: center;">B<span style="color: #C43B29;">E</span>RND H<span style="color: #C43B29;">O</span>LMES</h1>
    </section>
    <section>
        <div class="column">
            <img class="img1" src="Bild1.png" alt="Widgets" height="535px" width="797px">
            <img class="img2" src="Bild2.png" alt="Widgets" height="535px" width="796px">
        </div>    
    </section>
    <section>
    <div class="container">
        <h2>I'm Bernd, a german website developer<br>that loves to learn new stuff</br></h2>
        <h2 style="text-align: right;">Developer, specializing in website creation 
            <br>and creating with passion in every possible way. Motion </br>
            Graphics, beautiful UI, Animations and Unique Designs</h2>
    </div>
    </section>
    <section>
        <h3>
            SELECTED WORKS<sup><sup><sup>HTML</sup></sup></sup>
        </h3>
        <div class="box">
            <div class="column">
                <a href="layout.html"><img class="img3" src="layout.png" alt="Widgets" height="384px" width="768px"></a>
                <a href="laptop.html"><img class="img4" src="Laptop.png" alt="Widgets" height="384px" width="768px"></a>
            </div>
            <div class="column1">
                <p>I can  create nice website designs<br>with nice animations and functions</br></p>
                <p style="text-align: right;">Also I produce slick designed Laptops 
                    <br>and phones you may know.</br></p>
            </div>
            <div class="column">
                <a href="websites.html"><img class="img5" src="Websites.png" alt="Widgets" height="384px" width="768px"></a>
                <a href="website.html"><img class="img6" src="Website.png" alt="Widgets" height="384px" width="768px"></a>
            </div>
            <div class="column1">
                <p>Lorem ipsum dolor sit amet consectetur, <br>adipisicing elit. Distinctio a optio, dicta</br>cupiditate saepe facilis excepturi iusto.</p>
                <p style="text-align: right;">Lorem ipsum dolor sit amet consectetur, adipisicing elit.<br> Distinctio a optio, dicta cupiditate saepe</br> facilis excepturi iusto, eaque illo doloribus minus.</p>
            </div>
        </div>
    </section>
    <div class="container">
        <h4>
            ABOUT ME
        </h4>
        <h5>I am Bernd Holmes, a serious front-end developer proficient in HTML,<br> JavaScript, and CSS. My focus lies in crafting seamless user experiences</br> through meticulous coding and design. Welcome to my digital space.</h5>
    </div>
    <section>
    <div class="container1">    
        <h>
            EXPERIENCES
        </h>
        <h6>
            Lorem<br>ipsum</br><i>...</i>
        </h6>
        <h6>
            Lorem<br>ipsum</br><i>...</i>
        </h6>
        <h6>
            Lorem<br>ipsum</br><i>...</i>
        </h6>
        <h6>
            Lorem<br>ipsum</br><i>...</i>
        </h6>
    </div>
    </section>
    <section>
        
    </section>
    <section>
       
    </section>

</body>

</html> 

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:[email protected]&display=swap');


body {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    font-family: 'Space Grotesk', sans-serif;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}

section {
    display: grid;
    place-items: left;
    align-content: left;
    min-height: 50px;
    padding: 100px 0.5vw;
    margin: 0;
}


#icon {
    width: 30px;
    cursor: pointer;
    display: block;
    margin-left: 1750px;
    margin-right: 5vw;
}

h1 {
    font-size: 250px;
    position: relative;
    justify-content: space-evenly;
}

h2 {
    font-size: 20px;
    margin: 90px;
    justify-content: space-around;
    font-weight: normal;
}

.cursor-dot {
    width: 5px;
    height: 5px;
    background-color: white;
}

.cursor-outline {
    width: 30px;
    height: 30px;
    border: 2px solid hsla(0, 0%, 100%, 0.5);
}

.cursor-dot,
.cursor-outline {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

:root {
    --primary-color: #131316;
    --secondary-color: #ffffff;
}

.light-theme {
    --primary-color: #fff;
    --secondary-color: #131316;
}

.img1 {
    border-radius: 15px;
}

.img2 {
    border-radius: 15px;
}

.img3 {
    border-radius: 15px;
    transition: all .2s ease-in-out;
}

.img4 {
    border-radius: 15px;
    transition: all .2s ease-in-out;
}

.img5 {
    border-radius: 15px;
    transition: all .2s ease-in-out;
}

.img6 {
    border-radius: 15px;
    transition: all .2s ease-in-out;
}


.column {
    position: relative;
    display: flex;
    justify-content: space-evenly;
}


.box {
    position: relative;
    display: list-item;

}

.column1 {
    position: relative;
    display: flex;
    font-size: 20px;
    justify-content: space-around;
    padding-bottom: 250px;
    padding-top: 20px;
}

.img3:hover {
    transform: scale(1.05);
    }

.img4:hover {
    transform: scale(1.05);
}

.img5:hover {
    transform: scale(1.05);
}

.img6:hover {
    transform: scale(1.05);
}

h3 {
    font-size: 65px;
    padding-left: 25px;
}

sup {
    font-size: 20px;
}

h4 {
    font-size: 50px;
    padding-left: 25px;
    font-weight: normal;
}

h5 {
    font-size: 20px;
    padding-top: 42px;
    padding-right: 95px;
    font-weight: normal;
}

h6 {
    font-size: 20px;
    padding-right: 100px;
    font-weight: normal;
    
}

h {
    font-size: 50px;
    padding-left: 14px;
    font-weight: normal;
    padding-top: 40px;
}

.container {
    display: flex;
    justify-content: space-between;
}

.container1 {
    display: flex;
    justify-content: space-between;
}

I tried overflow: hidden; and overflow-x: hidden; but then it just cuts it of and it doesnt fit the screen sice. I thought it would work then but it didnt.

Tags:

2

Answers


  1. 0

    When you specify rules related to pixel size, those rules will be left unchanged even if you resize the window. By commenting out some of those rules I managed to make sure your page does not overflow:

    #icon {
    width: 30px;
    cursor: pointer;
    display: block;
    /*margin-left: 1750px;*/
    margin-right: 5vw;
}

h1 {
    /*font-size: 250px;*/
    position: relative;
    justify-content: space-evenly;
}

h2 {
    font-size: 20px;
    /*margin: 90px;*/
    justify-content: space-around;
    font-weight: normal;
}

    See:

    @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:[email protected]&display=swap');


body {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    font-family: 'Space Grotesk', sans-serif;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}

html, body {
    width: 100%;
    height: 100%;
}

section {
    display: grid;
    place-items: left;
    align-content: left;
    min-height: 50px;
    padding: 100px 0.5vw;
    margin: 0;
}


#icon {
    width: 30px;
    cursor: pointer;
    display: block;
    /*margin-left: 1750px;*/
    margin-right: 5vw;
}

h1 {
    /*font-size: 250px;*/
    position: relative;
    justify-content: space-evenly;
}

h2 {
    font-size: 20px;
    /*margin: 90px;*/
    justify-content: space-around;
    font-weight: normal;
}

.cursor-dot {
    width: 5px;
    height: 5px;
    background-color: white;
}

.cursor-outline {
    width: 30px;
    height: 30px;
    border: 2px solid hsla(0, 0%, 100%, 0.5);
}

.cursor-dot,
.cursor-outline {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

:root {
    --primary-color: #131316;
    --secondary-color: #ffffff;
}

.light-theme {
    --primary-color: #fff;
    --secondary-color: #131316;
}

.img1 {
    border-radius: 15px;
}

.img2 {
    border-radius: 15px;
}

.img3 {
    border-radius: 15px;
    transition: all .2s ease-in-out;
}

.img4 {
    border-radius: 15px;
    transition: all .2s ease-in-out;
}

.img5 {
    border-radius: 15px;
    transition: all .2s ease-in-out;
}

.img6 {
    border-radius: 15px;
    transition: all .2s ease-in-out;
}


.column {
    position: relative;
    display: flex;
    justify-content: space-evenly;
}


.box {
    position: relative;
    display: list-item;

}

.column1 {
    position: relative;
    display: flex;
    font-size: 20px;
    justify-content: space-around;
    padding-bottom: 250px;
    padding-top: 20px;
}

.img3:hover {
    transform: scale(1.05);
    }

.img4:hover {
    transform: scale(1.05);
}

.img5:hover {
    transform: scale(1.05);
}

.img6:hover {
    transform: scale(1.05);
}

h3 {
    font-size: 65px;
    padding-left: 25px;
}

sup {
    font-size: 20px;
}

h4 {
    font-size: 50px;
    padding-left: 25px;
    font-weight: normal;
}

h5 {
    font-size: 20px;
    padding-top: 42px;
    padding-right: 95px;
    font-weight: normal;
}

h6 {
    font-size: 20px;
    padding-right: 100px;
    font-weight: normal;
    
}

h {
    font-size: 50px;
    padding-left: 14px;
    font-weight: normal;
    padding-top: 40px;
}

.container {
    display: flex;
    justify-content: space-between;
}

.container1 {
    display: flex;
    justify-content: space-between;
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
<div class="curso-dot" data-cursor-dot></div>
<div class="cursor-outline" data-cursor-outline></div>

<script src="./script.js"></script>

    <section>
        <img src="sun.png" id="icon">
        <script>

            var icon = document.getElementById("icon");

            icon.onclick = function(){
                document.body.classList.toggle("light-theme");
                if(document.body.classList.contains("light-theme")){
                    icon.src = "moon.png";
                }else{
                    icon.src = "sun.png";
                }
            }
        </script>
    </section>
    <section>
        <h1 style="text-align: center;">B<span style="color: #C43B29;">E</span>RND H<span style="color: #C43B29;">O</span>LMES</h1>
    </section>
    <section>
        <div class="column">
            <img class="img1" src="Bild1.png" alt="Widgets" height="535px" width="797px">
            <img class="img2" src="Bild2.png" alt="Widgets" height="535px" width="796px">
        </div>    
    </section>
    <section>
    <div class="container">
        <h2>I'm Bernd, a german website developer<br>that loves to learn new stuff</br></h2>
        <h2 style="text-align: right;">Developer, specializing in website creation 
            <br>and creating with passion in every possible way. Motion </br>
            Graphics, beautiful UI, Animations and Unique Designs</h2>
    </div>
    </section>
    <section>
        <h3>
            SELECTED WORKS<sup><sup><sup>HTML</sup></sup></sup>
        </h3>
        <div class="box">
            <div class="column">
                <a href="layout.html"><img class="img3" src="layout.png" alt="Widgets" height="384px" width="768px"></a>
                <a href="laptop.html"><img class="img4" src="Laptop.png" alt="Widgets" height="384px" width="768px"></a>
            </div>
            <div class="column1">
                <p>I can  create nice website designs<br>with nice animations and functions</br></p>
                <p style="text-align: right;">Also I produce slick designed Laptops 
                    <br>and phones you may know.</br></p>
            </div>
            <div class="column">
                <a href="websites.html"><img class="img5" src="Websites.png" alt="Widgets" height="384px" width="768px"></a>
                <a href="website.html"><img class="img6" src="Website.png" alt="Widgets" height="384px" width="768px"></a>
            </div>
            <div class="column1">
                <p>Lorem ipsum dolor sit amet consectetur, <br>adipisicing elit. Distinctio a optio, dicta</br>cupiditate saepe facilis excepturi iusto.</p>
                <p style="text-align: right;">Lorem ipsum dolor sit amet consectetur, adipisicing elit.<br> Distinctio a optio, dicta cupiditate saepe</br> facilis excepturi iusto, eaque illo doloribus minus.</p>
            </div>
        </div>
    </section>
    <div class="container">
        <h4>
            ABOUT ME
        </h4>
        <h5>I am Bernd Holmes, a serious front-end developer proficient in HTML,<br> JavaScript, and CSS. My focus lies in crafting seamless user experiences</br> through meticulous coding and design. Welcome to my digital space.</h5>
    </div>
    <section>
    <div class="container1">    
        <h>
            EXPERIENCES
        </h>
        <h6>
            Lorem<br>ipsum</br><i>...</i>
        </h6>
        <h6>
            Lorem<br>ipsum</br><i>...</i>
        </h6>
        <h6>
            Lorem<br>ipsum</br><i>...</i>
        </h6>
        <h6>
            Lorem<br>ipsum</br><i>...</i>
        </h6>
    </div>
    </section>
    <section>
        
    </section>
    <section>
       
    </section>

</body>

</html>

    So, on large screen you will want large margin left, font size and margin. On small screens/viewports you want it to be smaller. Therefore you will need to look into media queries and use them to your advantage. Make screen size-dependent rules upon #icon, h1 and h2 so whatever the size is, appropriate rules will run. You could also switch to rules regarding percentage instead of pixels, so when the screen size changes and the percentage is being recalculated, then the new screen size will be used as the point of departure in the calculation.

    Login or Signup to reply.
  2. 0

    Also using display: grid on the section breaks the responsiveness, look into grid usage. Use px or rem unit on padding and margin not ‘vw’; i.e padding: 2px 2px;. It’s good to be consistent with units, look into how to use unit.

    section {
   display: grid;
   place-items: left;
   align-content: left;
   min-height: 50px;
   padding: 100px 0.5vw;
   margin: 0;
}

    The ‘#icon’ is one of the main issues because of the large margin-left: 1750px.
    Try this for the icon and it will be responsive regardless of the screen size

     //HTML
  <section class="icon-container">
     <img src="sun.png" id="icon">
    //Your other script for the icon
    </section>


//CSS
.icon-container{
     display: flex;
     justify-content: end;
 }
 #icon {
     width: 30px;
     cursor: pointer;
     display: block;
 }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search