Home > database >  How to set the right space between my sections in css?
How to set the right space between my sections in css?

Time：08-15

Well, there are two sections in my html code, and those sections have too much space between them, I mean if the screen is full stretched out and the height is large, it has a dozen of space between them. Also for some reason the second section's text is a bit further from the image. I've also tried to set display: flex; align-items: flex-start; justify-content:center;, but it hasn't worked. So if you have any idea for this problem, please help.

<!DOCTYPE html>
<html lang="en">
<head>
    <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>About Us</title>
    <link rel="stylesheet" href="../css/info.css">
    <script src="https://kit.fontawesome.com/f2665b7baf.js" crossorigin="anonymous"></script>   

</head>
<body>
    <nav>
        <label id="nav-bar-icon">
            <i ></i>
        </label>
        <div >
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li><a  href="info.html">ABOUT US</a></li>
                <li><a href="contact.html">CONTACT</a></li>
                <li><a href="#">SERVICES</a></li>
                <li><a href="#">FEEDBACK</a></li>
            </ul>
        </div>
        
    </nav>

    <div >
        <ul>
            <li><a href="index.html">HOME</a></li>
            <li><a  href="/">ABOUT US</a></li>
            <li><a href="contact.html">CONTACT</a></li>
            <li><a href="#">SERVICES</a></li>
            <li><a href="#">FEEDBACK</a></li>
        </ul>
    </div>

    <section id="about-szabi">
        <div >
            <img draggable="false" src="../img/person.png">
            <div >
                <h1>About Szabolcs</h1>
                <h5>Programmer & Web Designer</h5>
                <p>              
                    IAliquam lobortis posuere felis, sit amet ultrices turpis suscipit in. Mauris 
                    egestas aliquam lacus, non lobortis mi sollicitudin ut. Donec vitae est 
                    malesuada, dapibus nisi ac, placerat felis. Cras tincidunt vehicula lorem eget 
                    efficitur. Integer vestibulum nulla justo. Mauris efficitur viverra est, sit 
                    amet semper orci tristique eget. Nam condimentum accumsan lectus, a efficitur 
                    orci vestibulum a. Nulla quis dui congue leo ultricies convallis id. 
                </p>
            </div>
        </div>
    </section>

    <section id="about-milan">
        <div >
            <img draggable="false" src="../img/person2.png">
            <div >
                <h1>About Milán</h1>
                <h5>Programmer & Web Designer</h5>
                <p>
                    Donec velit ipsum, accumsan ut lectus eu, sodales hendrerit enim. Fusce ut 
                    sapien sit amet ligula volutpat condimentum vitae in neque. In sit amet erat 
                    et nisi interdum vestibulum. Nunc vestibulum, dolor id pellentesque dictum, 
                    est nulla hendrerit lacus, vitae ultricies mauris ante vitae tellus. Vivamus 
                    ac nisi at justo tempus imperdiet sed faucibus ex. Curabitur ut lectus leo. In 
                    odio magna, aliquet id lectus in, pretium fermentum massa. Fusce eget 
                    condimentum felis. Morbi quis diam massa.
                </p>
            </div>
        </div>
    </section>



    <script src="../js/index.js"></script>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif; 
}

body {
    background:#343131;
    }

nav {
    height: 80px;
    width: 100%;
    background-color: #2b2d2e;
    background-image: linear-gradient(62deg, #46484a 0%, #2e2e30 100%);


}

nav i {
    color: #d35858;
    cursor: pointer;
    font-size: 40px;
    padding-top: 20px;
    padding-right: 20px;
    float: right;
}

.nav-link {
    height: 100vh;
    position: fixed;
    width: 100%;
    background-color: rgb(42, 43, 43);
    left: -100%;
    top: 10%;
    transition: 0.5s;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.nav-link a {
    text-decoration: none;
    color: #fff;
    font-size: 30px;
    display: block;
    text-align: center;
    font-weight: bold;
    padding: -100px;
}
  
a:hover, a.active{
    transition: .5s;
    color: rgb(239, 122, 122);
}  

.nav-link ul li {
    padding: 18px;
}

.nav-link ul {
    list-style: none;
    margin-top: 50px;
}

.nav-bar-top ul {
    padding-top: 32px;
    float: right;
    padding-right: 80px;
}
.nav-bar-top ul li {
    display: inline-block;
    padding-left: 15px;
}

.nav-bar-top ul li a {
    color: #d5c9c9;
    text-decoration: none;
} 

.nav-bar-top ul li a.active {
    color: #fa9e9e;
}

.nav-bar-top ul li a:hover {
    color: #d35858;
}

/* Not default code */

#about-szabi {
    width: 100%;
    height: 100vh;
    background:#343131;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}



#about-szabi .content img {
    height: auto;
    width: 320px;
    max-width: 100%;
}



section .content img:hover {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    transition: 0.5s;
}

.text {
    width: 550px;
    max-width: 100%;
    padding: 10px 30px;
    display: grid;
    place-items: center;
    text-align: center;
}

.text h1 {
    color: #d35858;
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

}

.text h5 {
    font-size: 20px;
    color:rgb(193, 183, 183);
    text-align: center;
}

.text p {
    color: #e6d6d6;
    padding-top: 10px;
    font-size: 20px;
}

.content {
    width: 1280px;
    max-width: 95%;
    margin: 0px auto;
    display: flex;
    /* sets whether flex items are forced onto one line or can wrap onto multiple lines.
    If wrapping is allowed, it sets the direction that lines are stacked */
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}



@media(min-width: 601px) {
    #nav-bar-icon {
        display: none;
    }   
}

@media(max-width: 601px) {
    .nav-bar-top ul {
        display: none;
    }
}

CodePudding user response：

#about-szabi {
width: 100%;
height: 100%;
background:#343131;
display: flex;
align-items: flex-start;
justify-content: center;
}

In this part, I used 100% instead of 100vh, And I got the about-milan css in the html field with the same name as the first part.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif; 
}


body {
    background:#343131;
    }

nav {
    height: 80px;
    width: 100%;
    background-color: #2b2d2e;
    background-image: linear-gradient(62deg, #46484a 0%, #2e2e30 100%);


}

nav i {
    color: #d35858;
    cursor: pointer;
    font-size: 40px;
    padding-top: 20px;
    padding-right: 20px;
    float: right;
}

.nav-link {
    height: 100vh;
    position: fixed;
    width: 100%;
    background-color: rgb(42, 43, 43);
    left: -100%;
    top: 10%;
    transition: 0.5s;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.nav-link a {
    text-decoration: none;
    color: #fff;
    font-size: 30px;
    display: block;
    text-align: center;
    font-weight: bold;
    padding: -100px;
}
  
a:hover, a.active{
    transition: .5s;
    color: rgb(239, 122, 122);
}  

.nav-link ul li {
    padding: 18px;
}

.nav-link ul {
    list-style: none;
    margin-top: 50px;
}

.nav-bar-top ul {
    padding-top: 32px;
    float: right;
    padding-right: 80px;
}
.nav-bar-top ul li {
    display: inline-block;
    padding-left: 15px;
}

.nav-bar-top ul li a {
    color: #d5c9c9;
    text-decoration: none;
} 

.nav-bar-top ul li a.active {
    color: #fa9e9e;
}

.nav-bar-top ul li a:hover {
    color: #d35858;
}

/* Not default code */

#about-szabi {
    width: 100%;
    height: 100%;
    background:#343131;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}



#about-szabi .content img {
    height: auto;
    width: 320px;
    max-width: 100%;
}



.section .content img:hover {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    transition: 0.5s;
}

.text {
    width: 550px;
    max-width: 100%;
    padding: 10px 30px;
    display: grid;
    place-items: center;
    text-align: center;
}

.text h1 {
    color: #d35858;
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

}

.text h5 {
    font-size: 20px;
    color:rgb(193, 183, 183);
    text-align: center;
}

.text p {
    color: #e6d6d6;
    padding-top: 10px;
    font-size: 20px;
}

.content {
    width: 1280px;
    max-width: 95%;
    margin: 0px auto;
    display: flex;
    /* sets whether flex items are forced onto one line or can wrap onto multiple lines.
    If wrapping is allowed, it sets the direction that lines are stacked */
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}



@media(min-width: 601px) {
    #nav-bar-icon {
        display: none;
    }   
}

@media(max-width: 601px) {
    .nav-bar-top ul {
        display: none;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <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>About Us</title>
    <link rel="stylesheet" href="../css/info.css">
    <script src="https://kit.fontawesome.com/f2665b7baf.js" crossorigin="anonymous"></script>   

</head>
<body>
    <nav>
        <label id="nav-bar-icon">
            <i ></i>
        </label>
        <div >
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li><a  href="info.html">ABOUT US</a></li>
                <li><a href="contact.html">CONTACT</a></li>
                <li><a href="#">SERVICES</a></li>
                <li><a href="#">FEEDBACK</a></li>
            </ul>
        </div>
        
    </nav>

    <div >
        <ul>
            <li><a href="index.html">HOME</a></li>
            <li><a  href="/">ABOUT US</a></li>
            <li><a href="contact.html">CONTACT</a></li>
            <li><a href="#">SERVICES</a></li>
            <li><a href="#">FEEDBACK</a></li>
        </ul>
    </div>

    <section id="about-szabi">
        <div >
            <img draggable="false" src="../img/person.png">
            <div >
                <h1>About Szabolcs</h1>
                <h5>Programmer & Web Designer</h5>
                <p>              
                    IAliquam lobortis posuere felis, sit amet ultrices turpis suscipit in. Mauris 
                    egestas aliquam lacus, non lobortis mi sollicitudin ut. Donec vitae est 
                    malesuada, dapibus nisi ac, placerat felis. Cras tincidunt vehicula lorem eget 
                    efficitur. Integer vestibulum nulla justo. Mauris efficitur viverra est, sit 
                    amet semper orci tristique eget. Nam condimentum accumsan lectus, a efficitur 
                    orci vestibulum a. Nulla quis dui congue leo ultricies convallis id. 
                </p>
            </div>
        </div>
    </section>

    <section id="about-szabi">
        <div >
            <img draggable="false" src="../img/person2.png">
            <div >
                <h1>About Milán</h1>
                <h5>Programmer & Web Designer</h5>
                <p>
                    Donec velit ipsum, accumsan ut lectus eu, sodales hendrerit enim. Fusce ut 
                    sapien sit amet ligula volutpat condimentum vitae in neque. In sit amet erat 
                    et nisi interdum vestibulum. Nunc vestibulum, dolor id pellentesque dictum, 
                    est nulla hendrerit lacus, vitae ultricies mauris ante vitae tellus. Vivamus 
                    ac nisi at justo tempus imperdiet sed faucibus ex. Curabitur ut lectus leo. In 
                    odio magna, aliquet id lectus in, pretium fermentum massa. Fusce eget 
                    condimentum felis. Morbi quis diam massa.
                </p>
            </div>
        </div>
    </section>



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

Hello, I have a solution for two problems, You just have to take a look at a .section .content img:hover field for the image to be responsive.

Page link：https//www.codepudding.com/database/511218.html

Prev:How to stop text from overlapping when resizing page
Next:HTML Form not outputting anything. Getting NaN
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding