Home > Back-end >  Why is there an extra space in my webpage?
Why is there an extra space in my webpage?

Time：05-18

https://capr1sun.github.io/popsociology/

The main page of my website has an extra space on the right side which shows when I simulate smaller devices (iPhones). And on my desktop, there's a horizontal scroll bar at the bottom. How do I get rid of the extra space so the content fits exactly on the screen?

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,900&display=swap');

:root {
    --mainbgcolor: #FDFBEC;
    --logo: #F4C553;
    --green: #E1EEDD;
    --greentext: #153A1E;
    --orange: #EE9F4A;
}

html, body {
    margin: 0 auto;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Merriweather', serif;
    background-color: var(--mainbgcolor);
    box-sizing: border-box;

}



header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--mainbgcolor);
    color: var(--logo);
    
    padding: 0px 20px;
    font-size: small;
}

#logo {
    font-weight: 900;
}

header a, li {
    text-decoration: none;
    list-style: none;
    color: var(--orange);
    font-weight: 700;
}

ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 16px
  }

main {
    margin: 0px;
    padding: 0px;
    
    display: flex;
    flex-direction: column;
}

.icon-container {
    padding: 10px 20px;
    display: grid;
    gap: 15px;
    grid-template-columns: auto auto auto auto auto;
    justify-content: center;
}

.info-icons-container {
    padding: 5px 20px;
    text-align: center;
}

#conceptName {
    font-weight: 700;
    font-size: 2rem;
    margin: 5px 0px 10px 0px;
}

.conceptInfo {
    font-size: 0.8rem;
    
}

footer {
    background-color: var(--orange);
    color: var(--mainbgcolor);
    text-align: center;
    margin-top: auto;

}

.icon img { 
    width: 55px;
    height: auto;
    cursor: pointer;
}

.icon img:hover {
    box-shadow: 0 0 5px 5px var(--orange);
}

.info-icons-container {
    align-items: center;
    justify-content: center;
    animation: transitionIn 0.75s;
}


/*transition*/
@keyframes transitionIn {
    from {
        opacity: 0;
        transform: rotateX(-10deg);
    }
    to {
        opacity: 1;
        transform: rotateX(0);
    }
}

/* ABOUT PAGE */
.about {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.large-img-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.large-img-container img {
    display: block;
    width: 200px;
    height: auto;
}
.about-container {
    text-align: justify;
    padding: 10px 20px;
    text-align: center;

}

.about h1, .about h3 {
    color: var(--orange);
}

.about p {
    text-align: justify;
}

/*SLIDER PAGE*/

.imgslider {
    align-items: center;
    justify-content: center;
}
.controls {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    justify-content: center;
}


@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (-webkit-min-device-pixel-ratio: 1.5)  {
    header {
        font-size: medium;
        padding: 0 30px;
    }

    .icon-container {
        gap: 30px;
    }

    .icon img {
        width: 80px;
        height: auto;
    }

    #conceptName {
        font-size: 3rem;
    }
    #conceptInfo {
        font-size: 1rem;
        margin: 0 30px;
    }

  }

  @media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1190px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
    header {
        font-size: medium;
        padding: 0 30px;
    }

    .icon-container {
        gap: 30px;
    }

    .icon img {
        width: 100px;
        height: auto;
    }

    #conceptName {
        font-size: 3rem;
    }
    #conceptInfo {
        font-size: 1rem;
        margin: 0 30px;
    }
}

@media (min-width:1200px) { 
    header {
        font-size: medium;
        padding: 0 30px;
    }

    .icon-container {
        gap: 50px;
    }

    .info-icons-container {
        margin-bottom: 20px;
    }
    .icon img {
        width: 100px;
        height: auto;
    }

    #conceptName {
        font-size: 3rem;
    }
    #conceptInfo {
        font-size: 1rem;
        margin: 0 30px;
    }

    footer {
        width: 100%;
    }

    

 }

 @media (min-width:1281px) {
    header {
        font-size: large;
        padding: 0 5px;
        justify-content: space-around;
    }
    footer {
        width: 100vw;
    }

    .icon-container {
        gap: 30px;
    }

    main {
        align-items: center;
    }
    .info-icons-container {
        width: 50%;
    }

    #description{
        font-size: 1.5rem;
    }

    .about {
        display: flex;
        flex-direction: row;
        padding: 20px 100px 20px 20px;
    }
    
    .large-img-container {
        display: block;
        padding-left: 200px;
    }

    .large-img-container img {
       width: 500px;
       height: auto;
    }
    .about-container {
        text-align: justify;
        padding: 10px 100px;
        display: block;
    }
    
    .about h1, .about h3 {
        color: var(--orange);
    }
 }
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pop Sociology</title>
</head>
<body id="body">
    <header>
        <div >
        <h1 id="logo">Pop Sociology!</h1>
        </div>
        <div >
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
            </ul>
        </div>
    </header>
    <main>
       <div >
           <div >
               <a href="page1.html"><img src="whatissocio2.png" alt="What is Sociology?" id="whatIsSociologyIcon"></a>
           </div>
           <div >
            <a href="page2.html"><img src="sociotheory2.png" alt="Sociological Theories" id="socioTheoriesIcon"></a>
        </div>
        <div >
            <a href="page3.html"><img src="interactionist2.png" alt="Interactionist Perspective" id="interactionistIcon"></a>
        </div>
        <div >
            <a href="page4.html"><img src="conflict2.png" alt="Conflict Perspective" id="conflictIcon"></a>
        </div>
        <div >
            <a href="page5.html"><img src="functionalist2.png" alt="Functionalist Perspective" id="functionalistIcon"></a>
        </div>
        <div >
         <a href="page6.html"><img src="socialization2.png" alt="Socialization" id="socialization"></a>
                </div>
                <div >
                    <a href="page7.html"><img src="formssocializatin2.png" alt="Forms of Socialization" id="formsSocializationIcon"></a>
                </div>
                <div >
                    <a href="page8.html"><img src="exchange2.png" alt="Social Exchange Theory" id="exchangeIcon"></a>
                </div>
                <div >
                    <a href="page9.html"><img src="sociallearning2.png" alt="Social Learning Theory" id="learningIcon"></a>
                </div>
                <div >
                <a href="page10.html"><img src="labeling2.png" alt="Labeling Theory" id="labelingIcon"></a>
            </div>
            <div >
                <a href="page11.html"><img src="feminism2.png" alt="Feminist Theory" id="feminismIcon"></a>
            </div>
            <div >
                <a href="page12.html"><img src="critical2.png" alt="Critical Theory" id="criticalIcon"></a>
            </div>
            <div >
                <a href="page13.html"><img src="strain2.png" alt="Social Strain Theory" id="strainIcon"></a>
            </div>
            <div >
            <a href="page14.html"><img src="rational2.png" alt="Rational Theory" id="rationalIcon"></a>
            </div>
            <div >
            <a href="page15.html"><img src="game2.png" alt="Game Theory" id="gameIcon"></a>
            </div>
            <div >
            <a href="page16.html"><img src="sociobiology2.png" alt="Sociobiology" id="sociobiologyIcon"></a>
            </div>
            <div >
                <a href="page17.html"><img src="chaos2.png" alt="Chaos Theory" id="chaosIcon"></a>
            </div>
            <div >
            <a href="page18.html"><img src="gears2.png" alt="Social Phenomenology" id="phenomonologyIcon"></a>
            </div>
            <div >
            <a href="page19.html"><img src="disengagement2.png" alt="Disengagement Theory" id="disengagementIcon"></a>
            </div>
            <div >
            <a href="page20.html"><img src="macro2.png" alt="Macro Theory" id="macroIcon"></a>
            </div>
            <div >
                <a href="page21.html"><img src="comte2.png" alt="August Comte" id="comteIcon"></a>
                </div>
                <div >
                    <a href="page22.html"><img src="marx2.png" alt="Karl Marx" id="marxIcon"></a>
                </div>
                <div >
                <a href="page23.html"><img src="durkheim2.png" alt="Emile Durkheim" id="durkheimIcon"></a>
                </div>
                <div >
                <a href="page24.html"><img src="weber2.png" alt="Max Weber" id="weberIcon"></a>
                </div>
                <div >
                <a href="page25.html"><img src="spencer2.png" alt="Herbert Spencer" id="spencerIcon"></a>
                </div>
       </div>
       <div >
           <h3 id="conceptName"><span id="conceptNameDisplay">Bite-sized sociology for the new generation!</h3></span>
           <p id="description"><span id="conceptInfoDisplay">What do you want to learn today?</span></p></span>
            
               
       </div>
    </main>
    <footer>
        <p>Created by Me</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

CodePudding user response：

The problem is in

footer {
        width: 100vw;
    }

You can just remove it or use 100% rather than 100vw, and add width: 100% to body tag.

CodePudding user response：

There is a scroll due to the size of the anchors text. So you can set a relative size to them. For example font-size: 2.2vw for .icon-container:

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,900&display=swap');

:root {
    --mainbgcolor: #FDFBEC;
    --logo: #F4C553;
    --green: #E1EEDD;
    --greentext: #153A1E;
    --orange: #EE9F4A;
}
html, body {
    margin: 0 auto;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Merriweather', serif;
    background-color: var(--mainbgcolor);
    box-sizing: border-box;
}
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--mainbgcolor);
    color: var(--logo);
    padding: 0px 20px;
    font-size: small;
}

#logo {
    font-weight: 900;
}

header a, li {
    text-decoration: none;
    list-style: none;
    color: var(--orange);
    font-weight: 700;
}

ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 16px
  }

main {
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-direction: column;
}

.icon-container {
    padding: 10px 20px;
    display: grid;
    gap: 15px;
    grid-template-columns: auto auto auto auto auto;
    justify-content: center;
    font-size: 2.2vw; /* here */
}

.info-icons-container {
    padding: 5px 20px;
    text-align: center;
}

#conceptName {
    font-weight: 700;
    font-size: 2rem;
    margin: 5px 0px 10px 0px;
}

.conceptInfo {
    font-size: 0.8rem;
    
}

footer {
    background-color: var(--orange);
    color: var(--mainbgcolor);
    text-align: center;
    margin-top: auto;

}

.icon img { 
    width: 55px;
    height: auto;
    cursor: pointer;
}

.icon img:hover {
    box-shadow: 0 0 5px 5px var(--orange);
}

.info-icons-container {
    align-items: center;
    justify-content: center;
    animation: transitionIn 0.75s;
}


/*transition*/
@keyframes transitionIn {
    from {
        opacity: 0;
        transform: rotateX(-10deg);
    }
    to {
        opacity: 1;
        transform: rotateX(0);
    }
}

/* ABOUT PAGE */
.about {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.large-img-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.large-img-container img {
    display: block;
    width: 200px;
    height: auto;
}
.about-container {
    text-align: justify;
    padding: 10px 20px;
    text-align: center;

}

.about h1, .about h3 {
    color: var(--orange);
}

.about p {
    text-align: justify;
}

/*SLIDER PAGE*/

.imgslider {
    align-items: center;
    justify-content: center;
}
.controls {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    justify-content: center;
}


@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (-webkit-min-device-pixel-ratio: 1.5)  {
    header {
        font-size: medium;
        padding: 0 30px;
    }

    .icon-container {
        gap: 30px;
    }

    .icon img {
        width: 80px;
        height: auto;
    }

    #conceptName {
        font-size: 3rem;
    }
    #conceptInfo {
        font-size: 1rem;
        margin: 0 30px;
    }

  }

  @media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1190px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
    header {
        font-size: medium;
        padding: 0 30px;
    }

    .icon-container {
        gap: 30px;
    }

    .icon img {
        width: 100px;
        height: auto;
    }

    #conceptName {
        font-size: 3rem;
    }
    #conceptInfo {
        font-size: 1rem;
        margin: 0 30px;
    }
}

@media (min-width:1200px) { 
    header {
        font-size: medium;
        padding: 0 30px;
    }

    .icon-container {
        gap: 50px;
    }

    .info-icons-container {
        margin-bottom: 20px;
    }
    .icon img {
        width: 100px;
        height: auto;
    }

    #conceptName {
        font-size: 3rem;
    }
    #conceptInfo {
        font-size: 1rem;
        margin: 0 30px;
    }

    footer {
        width: 100%;
    }

    

 }

 @media (min-width:1281px) {
    header {
        font-size: large;
        padding: 0 5px;
        justify-content: space-around;
    }
    footer {
        width: 100vw;
    }

    .icon-container {
        gap: 30px;
    }

    main {
        align-items: center;
    }
    .info-icons-container {
        width: 50%;
    }

    #description{
        font-size: 1.5rem;
    }

    .about {
        display: flex;
        flex-direction: row;
        padding: 20px 100px 20px 20px;
    }
    
    .large-img-container {
        display: block;
        padding-left: 200px;
    }

    .large-img-container img {
       width: 500px;
       height: auto;
    }
    .about-container {
        text-align: justify;
        padding: 10px 100px;
        display: block;
    }
    
    .about h1, .about h3 {
        color: var(--orange);
    }
 }
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pop Sociology</title>
</head>
<body id="body">
    <header>
        <div >
        <h1 id="logo">Pop Sociology!</h1>
        </div>
        <div >
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
            </ul>
        </div>
    </header>
    <main>
       <div >
           <div >
               <a href="page1.html"><img src="whatissocio2.png" alt="What is Sociology?" id="whatIsSociologyIcon"></a>
           </div>
           <div >
            <a href="page2.html"><img src="sociotheory2.png" alt="Sociological Theories" id="socioTheoriesIcon"></a>
        </div>
        <div >
            <a href="page3.html"><img src="interactionist2.png" alt="Interactionist Perspective" id="interactionistIcon"></a>
        </div>
        <div >
            <a href="page4.html"><img src="conflict2.png" alt="Conflict Perspective" id="conflictIcon"></a>
        </div>
        <div >
            <a href="page5.html"><img src="functionalist2.png" alt="Functionalist Perspective" id="functionalistIcon"></a>
        </div>
        <div >
         <a href="page6.html"><img src="socialization2.png" alt="Socialization" id="socialization"></a>
                </div>
                <div >
                    <a href="page7.html"><img src="formssocializatin2.png" alt="Forms of Socialization" id="formsSocializationIcon"></a>
                </div>
                <div >
                    <a href="page8.html"><img src="exchange2.png" alt="Social Exchange Theory" id="exchangeIcon"></a>
                </div>
                <div >
                    <a href="page9.html"><img src="sociallearning2.png" alt="Social Learning Theory" id="learningIcon"></a>
                </div>
                <div >
                <a href="page10.html"><img src="labeling2.png" alt="Labeling Theory" id="labelingIcon"></a>
            </div>
            <div >
                <a href="page11.html"><img src="feminism2.png" alt="Feminist Theory" id="feminismIcon"></a>
            </div>
            <div >
                <a href="page12.html"><img src="critical2.png" alt="Critical Theory" id="criticalIcon"></a>
            </div>
            <div >
                <a href="page13.html"><img src="strain2.png" alt="Social Strain Theory" id="strainIcon"></a>
            </div>
            <div >
            <a href="page14.html"><img src="rational2.png" alt="Rational Theory" id="rationalIcon"></a>
            </div>
            <div >
            <a href="page15.html"><img src="game2.png" alt="Game Theory" id="gameIcon"></a>
            </div>
            <div >
            <a href="page16.html"><img src="sociobiology2.png" alt="Sociobiology" id="sociobiologyIcon"></a>
            </div>
            <div >
                <a href="page17.html"><img src="chaos2.png" alt="Chaos Theory" id="chaosIcon"></a>
            </div>
            <div >
            <a href="page18.html"><img src="gears2.png" alt="Social Phenomenology" id="phenomonologyIcon"></a>
            </div>
            <div >
            <a href="page19.html"><img src="disengagement2.png" alt="Disengagement Theory" id="disengagementIcon"></a>
            </div>
            <div >
            <a href="page20.html"><img src="macro2.png" alt="Macro Theory" id="macroIcon"></a>
            </div>
            <div >
                <a href="page21.html"><img src="comte2.png" alt="August Comte" id="comteIcon"></a>
                </div>
                <div >
                    <a href="page22.html"><img src="marx2.png" alt="Karl Marx" id="marxIcon"></a>
                </div>
                <div >
                <a href="page23.html"><img src="durkheim2.png" alt="Emile Durkheim" id="durkheimIcon"></a>
                </div>
                <div >
                <a href="page24.html"><img src="weber2.png" alt="Max Weber" id="weberIcon"></a>
                </div>
                <div >
                <a href="page25.html"><img src="spencer2.png" alt="Herbert Spencer" id="spencerIcon"></a>
                </div>
       </div>
       <div >
           <h3 id="conceptName"><span id="conceptNameDisplay">Bite-sized sociology for the new generation!</h3></span>
           <p id="description"><span id="conceptInfoDisplay">What do you want to learn today?</span></p></span>
            
               
       </div>
    </main>
    <footer>
        <p>Created by Me</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

Page link：https//www.codepudding.com/Backend/410661.html

Prev:Setting up a search function on a webpage
Next:Add picture behind Google maps map
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding