При уменьшении страницы, она не уменьшается!

Millio · November 29, 2021

Я первый раз начал пытатся создавать сайт по макету, и вот кое что получается, я понимаю что много ошибок, но это первый раз!

Я остановился, и не могу понять как сделать так чтобы при уменьшении страницы, всё уменьшалось равномерно, у меня когда уменьшаю страницу, просто видно пол страницы!

<!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">
    <link rel="stylesheet" href="assets/css/style.css">
    <title>Document</title>
</head>
<body>
    <header>
    <div class="photo">
        <a href="assets/img/orig-3-10.jpg"></a>
    </header>
    <div class="item">
        <section>
        <h1 class="p1"><b>BOOST UP YOUR LOCAL BUSINESS</b></h1>
        <h2 class="p2">Lorem lpsum is simple dummy text of the printing and typesettings industry. Lorem lpsum typesetting</h2>
        </section>
              
        <section>
            <form action="">
            <label for="name"></label>
            <input required class="name" type="name" name="Full Name" placeholder="Full Name">

            <label for="email"></label>
            <input required class="email" type="email" name="Email Address" placeholder="Email Address">

            <label for="phone"></label>
            <input required class="phone" type="phone" name="phone" placeholder="Phone Number">

            <button class="send"><b>REQUEST A QUOTE</b></button>
            </form>
        </section>
    </div>
        <section>
            <nav>
            <form action="index.html">
                <button class="home"><b>HOME</b></button>
            </form>
        <form action="index.html">
            <button class="service"><b>SERVICE</b></button>
        </form>
        <form action="index.html">
            <button class="aboutus"><b>ABOUT US</b></button>
        </form>
        <form action="index.html">
            <button class="pricingtable"><b>PRICING TABLE</b></button>
        </form>
        <form action="index.html">
            <button class="howitwork"><b>HOW IT WORK</b></button>
        </form>
        <form action="index.html">
            <button class="happyclients"><b>HAPPY CLIENTS</b></button>
        </form>
        <a href="tel:+380689965758"><b>CONTACT US</b></a>
 
        </form>
        </section>
        <section>
            <img src="assets/img/123123.png" alt="">
        </section>
    </nav>
    <footer>
        <p class="p3"><b>OUR SERVICES</b></p>
        <p class="p4">Lorem ipsum is samply dummy Business industry.</p>
    </footer>

</body>     
</html>

.item {
    width: 1900px;
    height: 600px;
    background-color: rgb(45, 194, 214);
    margin-top: 140px;
    box-sizing: border-box;
}

p {
    margin: 0px;
}

.p1 {
    color: white;
    display: flex;
    justify-content: center;
    padding-top: 80px;
    font-size: 40px;
}

.p2 {
    color: white;
    font-size: 20px;
    display: flex;
    justify-content: center;
    padding-bottom: 350px;
}

.p3 {
    color: black;
    font-size: 25px;
    position: absolute;
    margin-left: 835px;
    margin-top: 40px;  
}

.p4 {
    color: black;
    position: absolute;
    margin-left: 785px;
    margin-top: 70px;
    font-size: 16 px;
}

.name {
    border: solid 1px white;
    width: 293px;
    height: 43px;
    position: absolute;
    bottom: 550px;
    left: 360px;
}

.email {
    border: solid 1px white;
    width: 293px;
    height: 43px;
    position: absolute;
    bottom: 296px;
    left: 662px;
    position: relative;
    display: block;
}

.phone {
    border: solid 1px white;
    width: 293px;
    height: 43px;
    position: absolute;
    bottom: 550px;
    left: 980px;
}

.send {
    color: white;
    background-color: orange;
    border: solid 1px orange;
    width: 235px;
    height: 47px;
    position: absolute;
    bottom: 550px;
    left: 1290px;
}

.home {
    color: white;
    background-color: orange;
    border: solid 1px orange;
    width: 75px;
    height: 32px;
    position: absolute;
    bottom: 886px;
    left: 700px;
}

.service {
    color: gray;
    background-color: white;
    border: solid 1px white;
    width: 75px;
    height: 32px;
    position: absolute;
    bottom: 886px;
    left: 795px;
}

.aboutus {
    color: gray;
    background-color: white;
    border: solid 1px white;
    width: 90px;
    height: 32px;
    position: absolute;
    bottom: 886px;
    left: 885px;
}

.pricingtable {
    color: gray;
    background-color: white;
    border: solid 1px white;
    width: 115px;
    height: 32px;
    position: absolute;
    bottom: 886px;
    left: 990px;
}

.howitwork {
    color: gray;
    background-color: white;
    border: solid 1px white;
    width: 115px;
    height: 32px;
    position: absolute;
    bottom: 886px;
    left: 1120px;
}

.happyclients {
    color: gray;
    background-color: white;
    border: solid 1px white;
    width: 125px;
    height: 32px;
    position: absolute;
    bottom: 886px;
    left: 1250px;
}

a {
    text-decoration: none;
    color: gray;
    background-color: white;
    border: solid 1px white;
    width: 150px;
    height: 32px;
    position: relative;
    bottom: 710px;
    left: 1389px;
    text-decoration: none;
}

img {
    height: 69px;
    position: relative;
    bottom: 748px;
    left: 320px;
    background-image: white;

Edited November 29, 2021 by Millio

Vlad_P · November 30, 2021

Вы для .item строго задаете ширину. вот она и остается неизменной. Если хотите ограничить ширину - пишите max-width

Sign In

При уменьшении страницы, она не уменьшается!

Question

Millio

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Vlad_P

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information