Почему белая линия и почему моя кнопка не реагирует?

ProgramBox

Почему белая линия и почему моя кнопка не реагирует?

Post author:admin
Запись опубликована:19 ноября, 2022
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

В общем, я только начал изучать HTML и CSSenter описание изображения здесь, и я подумал, что достаточно уверен, чтобы сделать небольшой проект, чтобы опробовать то, что я узнал, и я создал быстрый дизайн в xd, который, как я думал, я смогу легко кодировать. Однако все пошло не так, как планировалось … : D

Итак, в основном у меня есть 2 проблемы, с которыми я не могу справиться… И я подумал про себя, что StackOverflow — лучшее место для поиска решения, а также для получения дополнительной информации по этому вопросу.

Поэтому, когда я изменяю размер своего окна вокруг размера экрана телефона, кнопка не попадает в середину. Здесь

А также есть эта белая линия между заголовком и героем, от которой я не могу понять, как избавиться. Здесь

  body{
    overflow-x: hidden !important;
    margin: 0%;
 }
 header{
    height: 150px;
    width: 100%;
    background-color:#4B4D4D;
    background-repeat: no-repeat;
    background-size: cover;
 }

.hero{
    background-image: url(Hero.png); 
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
    position: relative;
    margin: 0%;
    padding-bottom: 40px;
    border: 0px;
}

.hero h1{
    padding-top: 450px;
    color:#FFEB8A ;
    font-size: 70px;
    font-weight: 700;  
    text-align: center;
    width: auto;
}

.hero p{
    color: white;
    font-size: 35px;
    font-weight: 600;
    text-align: center;
}

.hero button{
    background-color:#4B4D4D ;
    color:#FFEB8A ;
    display: block;
    padding: 21px 50px;
    text-align: center;
    margin: auto;
    max-width: 300px;
    min-width: 50px;
    width: 100%;
    font-size: 30px;
    margin-top: 20px;
    margin-bottom: 20%;
}

.bounties{
    text-align: center;
    margin: auto;
    width:700px;
}

@media only screen and (max-width: 920px){
    h1{
    margin-top: 150px;
    }
}

@media only screen and (max-width: 920px){
    h1{
        font-size: 5em;
    }

    p{
        font-size: 1.4em;
    }
    .hero button{
        font-size: 1em;
    }
}

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

    </header>
    <div class="hero">
        <h1>CSS QUEST</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing </p>
        <div class="bounties">
        <button type="button">BOUNTIES</button>
    </div>
    </div>

    <div class="heist">
         <!--Flex-->
        <h2>CSS GANG HEIST</h2>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>
        <button type="button">TO QUEST</button>
    </div>
    
    <div class="last-section">

         <!--Circles-->
 <!--Add the images to the src and alt-->
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
            
         <!--Exclamation marks-->
 <!--Add the images to the src and alt-->
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">

    </div>
       
</body>
</html>

Развернуть фрагмент

1. Пожалуйста, попробуйте использовать возможности отладки вашего браузера. Используйте консоль браузера (инструменты разработчика) (нажмите F12 ) и проверьте модели блоков ваших элементов.

Ответ №1:

Хорошо, я внес некоторые изменения в ваш код, и это сработало. (Кнопка всегда находится в центре в Chrome и Safari [Скриншоты прилагаются])

Также вот учебник, который вы должны прочитать о дизайне гибких коробок: https://css-tricks.com/snippets/css/a-guide-to-flexbox /

Изменения, которые я внес, чтобы избавиться от пробелов:

style.css

    body {
    overflow-x: hidden !important;
    margin: 0%;
    /* Added these two lines */
    display: flex;
    flex-direction: column;
   }

@media only screen and (max-width: 920px) {
    h1 {
        /* Commented Out this line  */
        /* margin-top: 150px; */
    }

}

Окончательный код:

 body {
    overflow-x: hidden !important;
    margin: 0%;
    /* Added these two lines */
    display: flex;
    flex-direction: column;
}

.header {
    height: 150px;
    width: 100%;
    background-color: #4B4D4D;
    background-repeat: no-repeat;
    background-size: cover;


}


.hero {
    background-image: url(Hero.png);
    background-color: coral;
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
    position: relative;

    margin: 0%;
    padding-bottom: 40px;
    border: 0px;
}

.hero h1 {
    padding-top: 450px;
    color: #FFEB8A;
    font-size: 70px;
    font-weight: 700;
    text-align: center;
    width: auto;
}

.hero p {
    color: white;
    font-size: 35px;
    font-weight: 600;
    text-align: center;



}

.hero button {
    background-color: #4B4D4D;
    color: #FFEB8A;
    display: block;
    padding: 21px 50px;
    text-align: center;
    margin: auto;
    max-width: 300px;
    min-width: 50px;
    width: 100%;
    font-size: 30px;
    margin-top: 20px;
    margin-bottom: 20%;


}

.bounties {
    text-align: center;
    margin: auto;
    width: 700px;
}

@media only screen and (max-width: 920px) {
    h1 {
        /* Commented Out this line  */
        /* margin-top: 150px; */
    }

}

@media only screen and (max-width: 920px) {
    h1 {
        font-size: 5em;

    }

    p {
        font-size: 1.4em;

    }

    .hero button {
        font-size: 1em;


    }

}

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WoW Party</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="header">

    </div>
    <div class="hero">
        <h1>CSS QUEST</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing </p>
        <div class="bounties">
            <button type="button">BOUNTIES</button>
        </div>
    </div>

    <div class="heist">
        <!--Flex-->
        <h2>CSS GANG HEIST</h2>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
            dolore magna</p>
        <button type="button">TO QUEST</button>
    </div>


    <div class="last-section">

        <!--Circles-->
        <!--Add the images to the src and alt-->
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">

        <!--Exclamation marks-->
        <!--Add the images to the src and alt-->
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">

    </div>

</body>

</html>

Развернуть фрагмент