[ANSWERED] html – Why the white line and why doesn’t my button get responsive?

Question 1

Ok I made some changes in Your Code and It worked. (The button is always on the center on Chrome and Safari [Screenshots Attached])

Also Heres a Tutorial You should read about flex-box design:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Changes I Made in order to get rid of whitespace:

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; */
    }

}

Final Code:

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>

Button Screenshots

Question 2

So basically I just started learning HTML and CSSenter image description here and I thought I was confident enough to make a small project to try out what I’ve learned and I created a quick design in xd which I thought I will be able to code easily. However, it didn’t go as planned… 😀

So basically I have 2 issues which I can’t deal with… And I thought to myself that StackOverflow is the best place to find the solution as well as learn more on the subject.

So When I resize my window do around a phone screen size the button doesn’t go in the middle.
Here

And also there is that white line between the header and the hero which I can’t figure out how to get rid of.
Here

 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>

Bollate

[ANSWERED] html – Why the white line and why doesn’t my button get responsive?

By

Solution 1 :

Final Code:

Button Screenshots

Problem :

Comments

Comment posted by debugging capabilities

By

Related Post

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate