CODEWITHSUNDEEP
htmlcssbuttonresponsive
berkay
berkay

Reputation: 13

HTML/CSS Why does the button keep disappearing when scaling width?

I tried to make a responsive website for a project on school but this button keeps disappearing when I scale the width of the website.

Good View:

enter image description here

button disappears at tablet and mobile view:

enter image description here

How can I fix this?

The Code:

html * {
  padding:0;
  margin:0;
}
@font-face {
  font-family: ITC Franklin;
  src: url("ITC_Franklin_Book.otf");
}
h1, p, h3 {
  font-family: ITC Franklin;
}
#results img{
  margin-left: 3%;
  margin-top: 6%;
}
#wrapper{
  width: 100%;
  height: 100%;
}
header{
  z-index: 1;
}
header h1{
  margin-top: 1.5%;
  margin-left: 25.5%;
}
.knopje {
  width: 50%; 
  height: 10%; 
  border: medium solid grey; 
  margin-left: 25%;
}

/* MENU */
#nav li {
  background-color: white;
  height: 50%;
  line-height: 40px;
  list-style: outside none none;
  margin-left: 26%;
  padding-left: 35px;
  padding-right: 35px;
  position: relative;
}

/* body */
body {
  line-height: 1.5em;
  max-width:100%;	
  background-image:url("image/background.jpg");
  background-size: 100%;
}

/* Header */
header {
  background: none repeat scroll 0 0 white;
  border-radius: 15px;
  display: inline-block;
  float: left;
  height: 50px;
  margin: 2.5% 4.5% 3.5% 10%;
  width: 82.5%;
}
header img {
  display: inline;
  margin-left: -3%;
  margin-top: -2%;
  max-width: 100%;
  position: absolute;
  width: 9%;
  z-index: 1;
}

/* Actions screen LINKS */
div #linkerdiv{
  background: none repeat scroll 0 0 white;
  border-radius: 30px;
  display: inline-block;
  float: left;
  height: 500px;
  margin-left: 7.5%;
  margin-top: 0.5%;
  margin-bottom: 3.5%;
  width: 40%;
}
input #poll{
  margin-left: 5%;
}
#linkerdiv img{
  width:45%;
  height:40%;
  margin-left: 3%;
  margin-top: 5%;
  max-width: 100%;
  z-index: 1;
}
#linkerdiv p{
  margin-left: 5%;
  margin-top: 1%;
  margin-bottom: 1%;
  width: 90%;
  font-size: 11pt;
}
#linkerdiv li{
  font-family: ITC Franklin;
  margin-left: 5%;
  list-style: none;
}
h3 {
  margin-left: 5%;
}
textarea{
  border-radius: 30px;
  max-width: 90%;
  width: 90%;
  margin-left: 5%;
  margin-top: 1%;
}

/* Presentatoren div rechts */
div #rechterdiv{
  background: none repeat scroll 0 0 white;
  border-radius: 30px;
  font-family: ITC Franklin;
  display: inline-block;
  float: right;
  height: 500px;
  margin-right: 7.5%;
  margin-top: 0.5%;
  margin-bottom: 3.5%;
  width: 40%;
}
#rechterdiv h2 {
  margin-left: 5%;
  margin-top: 3%;
  margin-bottom: 1%;
  width: 90%;
  font-size: 13pt;
}
#rechterdiv p{
  margin-left: 5%;
  margin-top: 1%;
  margin-bottom: 1%;
  width: 90%;
  font-size: 11pt;
}

/*BREAKPOINT1*/

/*BREAKPOINT 2*/
@media screen and (max-width:40em) {
  html, body {
    width: 100%;
    overflow-x: hidden;
  }
  header h1{
    font-size: 1.5em;
  }
  div #linkerdiv {
    background: none repeat scroll 0 0 white;
    border-radius: 30px;
    height: 500px;
    margin-left: 7.5%;
    margin-top: 0.5%;
    margin-bottom: 3.5%;
    width: 87%;
  }    
  div #rechterdiv {
    background: none repeat scroll 0 0 white;
    border-radius: 30px;
    float: right;
    height: 500px;
    margin-bottom: 3.5%;
    margin-right: 5.5%;
    margin-top: 0.5%;
    width: 87%;
  }
  #w3-display-container mySlides {
    z-index: 5;
  }
  #w3-btn-floating w3-hover-dark-grey w3-display-right {
    z-index: 10;
  }
  #w3-btn-floating w3-hover-dark-grey w3-display-left {
    z-index: 10;
  }
  header {
    background: none repeat scroll 0 0 white;
    border-radius: 15px;
    display: inline-block;
    float: left;
    height: 75px;
    margin: 2.5% 4.5% 3.5% 10%;
    width: 82.5%;
  }
  header img {
    display: inline;
    margin-left: -7%;
    margin-top: -2%;
    max-width: 100%;
    position: absolute;
    width: 25%;
  }
}
<!DOCTYPE html>
<html>
  <head>
    <title>3 Op Reis Second Screen</title>
    <meta http-equiv="Content-type" content="text/html;charset=utf-8"/>
    <meta name="description" content="Second screen" />
    <meta name="author" content="Berkay Bayir" />
    <meta name="keywords" content="3opreis second screen" />
    <link href="style.css" media="screen" rel="stylesheet" type="text/css"/>
    <script src="js/script.js" type="text/javascript" async defer></script>
  </head>
  <body>
    <div id="wrapper" data-role="page" class="ui-content">
      <header>
        <img src="image/logotje.png" alt="logo"/>
        <nav id="header" role="header text">
          <ul>
            <h1>3 Op Reis Second Screen App</h1>
          </ul>
        </nav>
      </header>
      <div id="linkerdiv">
        <img src="image/3.png" alt="logo"/>
        <img src="image/4.png" alt="logo"/>
        <p>
          In de aflevering van 15 januari 2017, die zometeen zal beginnen, bezoeken de presentatoren de landen Egypte, Italië en Canada. Ze gaan langs de steden Cairo, San Marino en Toronto.

          Hieronder kun je stemmen wat voor jou het interessant lijkt.
          De resultaten zullen aan het begin van de aflevering op tv getoond worden.

        </p>
        <ul>
          <form id="formulier">
            <h3>Poll: Naar welk land zou jij het liefst heen willen gaan?</h3>
            <li><input type="radio" id="poll" name="stemmen" value="1"> Egypte</li>
            <li><input type="radio" id="poll" name="stemmen" value="2"> Italië</li>
            <li><input type="radio" id="poll" name="stemmen" value="3"> Canada</li>
            <input type="button" class="knopje" value="Stem!" onclick="thankYou()">
          </form>
        </ul>
      </div>
      <div id="rechterdiv">
        <div class="w3-container">
          <h2>Zondag 15 januari 2017 om 19.50 uur</h2>
          <p>Bekijk wie welk land bezoekt!</p>
        </div>
        <div class="w3-content w3-display-container">
          <a class="w3-btn-floating w3-hover-dark-grey w3-display-left" onclick="plusDivs(-1)">&#10094;</a>
          <a class="w3-btn-floating w3-hover-dark-grey w3-display-right" onclick="plusDivs(1)">&#10095;</a>
          <div class="w3-display-container mySlides">
            <img src="image/1.png" style="width:100%">
            <div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
              Geraldine in San Marino, Italië
            </div>
          </div>
          <div class="w3-display-container mySlides">
            <img src="image/2.png" style="width:100%">
            <div class="w3-display-bottomright w3-large w3-container w3-padding-16 w3-black">
              Dennis in Cairo, Egypte
            </div>
          </div>
        </div>
        </body>
      </html>

Upvotes: 0

Views: 3012

Answers (2)

AymDev
AymDev

Reputation: 7504

Your linkerdiv element has a fixed height. When the window is resized, the elements take more place on the vertical axis as the width of your element is decreasing.
You should set an automatic height to keep the children elements inside the container :

#linkerdiv {
    height: auto;
}

And I think you shouldn't put your form elements in a list, a better behaviour would be to correctly style it :

<form id="formulier">
    <h3>Poll: Naar welk land zou jij het liefst heen willen gaan?</h3>
    <input type="radio" id="poll" name="stemmen" value="1">Egypte<br>
    <input type="radio" id="poll" name="stemmen" value="2">Italië<br>
    <input type="radio" id="poll" name="stemmen" value="3">Canada<br>
    <input type="button" class="knopje" value="Stem!" onclick="thankYou()">
</form>

in your CSS :

#formulier {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

Then continue to style it as you need.
MDN - flex box properties (to help you understand the CSS I wrote)

Upvotes: 0

Tha&#39;er AlAjlouni ثائر العجلوني
Tha&#39;er AlAjlouni ثائر العجلوني

Reputation: 15407

What is causing your problem is that your div #linkerdiv rule is defining the height to be 500px, so when the screen is narrow its content becomes higher than that, and everything is overflowed!

Here you have two options:

  1. Change the height for all screen widths by setting it to a new value
  2. Make a change to your media query to change the height on narrow screens only.

I updated your code to use a media query as an example:

html * {
  padding: 0;
  margin: 0;
}
@font-face {
  font-family: ITC Franklin;
  src: url("ITC_Franklin_Book.otf");
}
h1,
p,
h3 {
  font-family: ITC Franklin;
}
#results img {
  margin-left: 3%;
  margin-top: 6%;
}
#wrapper {
  width: 100%;
  height: 100%;
}
header {
  z-index: 1;
}
header h1 {
  margin-top: 1.5%;
  margin-left: 25.5%;
}
.knopje {
  width: 50%;
  height: 10%;
  border: medium solid grey;
  margin-left: 25%;
}
/* MENU */

#nav li {
  background-color: white;
  height: 50%;
  line-height: 40px;
  list-style: outside none none;
  margin-left: 26%;
  padding-left: 35px;
  padding-right: 35px;
  position: relative;
}
/* body */

body {
  line-height: 1.5em;
  max-width: 100%;
  background-image: url("image/background.jpg");
  background-size: 100%;
}
/* Header */

header {
  background: none repeat scroll 0 0 white;
  border-radius: 15px;
  display: inline-block;
  float: left;
  height: 50px;
  margin: 2.5% 4.5% 3.5% 10%;
  width: 82.5%;
}
header img {
  display: inline;
  margin-left: -3%;
  margin-top: -2%;
  max-width: 100%;
  position: absolute;
  width: 9%;
  z-index: 1;
}
/* Actions screen LINKS */

div #linkerdiv {
  background: none repeat scroll 0 0 white;
  border-radius: 30px;
  display: inline-block;
  float: left;
  height: 500px;
  margin-left: 7.5%;
  margin-top: 0.5%;
  margin-bottom: 3.5%;
  width: 40%;
}
input #poll {
  margin-left: 5%;
}
#linkerdiv img {
  width: 45%;
  height: 40%;
  margin-left: 3%;
  margin-top: 5%;
  max-width: 100%;
  z-index: 1;
}
#linkerdiv p {
  margin-left: 5%;
  margin-top: 1%;
  margin-bottom: 1%;
  width: 90%;
  font-size: 11pt;
}
#linkerdiv li {
  font-family: ITC Franklin;
  margin-left: 5%;
  list-style: none;
}
h3 {
  margin-left: 5%;
}
textarea {
  border-radius: 30px;
  max-width: 90%;
  width: 90%;
  margin-left: 5%;
  margin-top: 1%;
}
/* Presentatoren div rechts */

div #rechterdiv {
  background: none repeat scroll 0 0 white;
  border-radius: 30px;
  font-family: ITC Franklin;
  display: inline-block;
  float: right;
  height: 500px;
  margin-right: 7.5%;
  margin-top: 0.5%;
  margin-bottom: 3.5%;
  width: 40%;
}
#rechterdiv h2 {
  margin-left: 5%;
  margin-top: 3%;
  margin-bottom: 1%;
  width: 90%;
  font-size: 13pt;
}
#rechterdiv p {
  margin-left: 5%;
  margin-top: 1%;
  margin-bottom: 1%;
  width: 90%;
  font-size: 11pt;
}
/*BREAKPOINT1*/

/*BREAKPOINT 2*/

@media screen and (max-width: 40em) {
  html,
  body {
    width: 100%;
    overflow-x: hidden;
  }
  header h1 {
    font-size: 1.5em;
  }
  div #linkerdiv {
    background: none repeat scroll 0 0 white;
    border-radius: 30px;
    height: 700px;
    margin-left: 7.5%;
    margin-top: 0.5%;
    margin-bottom: 3.5%;
    width: 87%;
  }
  div #rechterdiv {
    background: none repeat scroll 0 0 white;
    border-radius: 30px;
    float: right;
    height: 500px;
    margin-bottom: 3.5%;
    margin-right: 5.5%;
    margin-top: 0.5%;
    width: 87%;
  }
  #w3-display-container mySlides {
    z-index: 5;
  }
  #w3-btn-floating w3-hover-dark-grey w3-display-right {
    z-index: 10;
  }
  #w3-btn-floating w3-hover-dark-grey w3-display-left {
    z-index: 10;
  }
  header {
    background: none repeat scroll 0 0 white;
    border-radius: 15px;
    display: inline-block;
    float: left;
    height: 75px;
    margin: 2.5% 4.5% 3.5% 10%;
    width: 82.5%;
  }
  header img {
    display: inline;
    margin-left: -7%;
    margin-top: -2%;
    max-width: 100%;
    position: absolute;
    width: 25%;
  }
}
<!DOCTYPE html>
<html>

<head>
  <title>3 Op Reis Second Screen</title>
  <meta http-equiv="Content-type" content="text/html;charset=utf-8" />
  <meta name="description" content="Second screen" />
  <meta name="author" content="Berkay Bayir" />
  <meta name="keywords" content="3opreis second screen" />
  <link href="style.css" media="screen" rel="stylesheet" type="text/css" />
  <script src="js/script.js" type="text/javascript" async defer></script>

</head>

<body>
  <div id="wrapper" data-role="page" class="ui-content">

    <header>
      <img src="image/logotje.png" alt="logo" />
      <nav id="header" role="header text">

        <ul>

          <h1>3 Op Reis Second Screen App</h1>
        </ul>
      </nav>
    </header>

    <div id="linkerdiv">
      <img src="image/3.png" alt="logo" />
      <img src="image/4.png" alt="logo" />

      <p>
        In de aflevering van 15 januari 2017, die zometeen zal beginnen, bezoeken de presentatoren de landen Egypte, Italië en Canada. Ze gaan langs de steden Cairo, San Marino en Toronto. Hieronder kun je stemmen wat voor jou het interessant lijkt. De resultaten
        zullen aan het begin van de aflevering op tv getoond worden.

      </p>
      <ul>
        <form id="formulier">
          <h3>Poll: Naar welk land zou jij het liefst heen willen gaan?</h3>
          <li>
            <input type="radio" id="poll" name="stemmen" value="1">Egypte</li>
          <li>
            <input type="radio" id="poll" name="stemmen" value="2">Italië</li>
          <li>
            <input type="radio" id="poll" name="stemmen" value="3">Canada</li>
          <input type="button" class="knopje" value="Stem!" onclick="thankYou()">
        </form>
      </ul>
    </div>


    <div id="rechterdiv">
      <div class="w3-container">
        <h2>Zondag 15 januari 2017 om 19.50 uur</h2>
        <p>Bekijk wie welk land bezoekt!</p>
      </div>

      <div class="w3-content w3-display-container">

        <a class="w3-btn-floating w3-hover-dark-grey w3-display-left" onclick="plusDivs(-1)">&#10094;</a>
        <a class="w3-btn-floating w3-hover-dark-grey w3-display-right" onclick="plusDivs(1)">&#10095;</a>

        <div class="w3-display-container mySlides">
          <img src="image/1.png" style="width:100%">
          <div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
            Geraldine in San Marino, Italië
          </div>
        </div>

        <div class="w3-display-container mySlides">
          <img src="image/2.png" style="width:100%">
          <div class="w3-display-bottomright w3-large w3-container w3-padding-16 w3-black">
            Dennis in Cairo, Egypte
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 1

Related Questions