CODEWITHSUNDEEP
htmlcssresponsive-design
Lucas Verhoest
Lucas Verhoest

Reputation: 275

Responsiveness working on PC but not on iPhone

When I test the responsiveness using 'Inspect element' it works really well but when I actually put the site online and open the webpage with my iPhone it doesn't work. It are just 4 icons in one row while it should be 2x2 icons. Anyone who can help me with this please?

Website on iPhone (how it shouldn't be)

Website on PC (how it should be)

@import url(https://fonts.googleapis.com/css?family=Fjalla+One);

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

body{
  font-family: 'Fjalla One', sans-serif;
  background: #2C3E50;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to top, #4CA1AF, #2C3E50);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to top, #4CA1AF, #2C3E50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background-repeat: no-repeat;

}

.container{
  margin: auto;
}


h1{
  text-transform: uppercase;
  font-size: 60px;
  line-height: 47px;
  letter-spacing: 2px;
  text-shadow: #533d4a 1px 1px, #533d4a 2px 2px, #533d4a 3px 3px, #533d4a 4px 4px;
  text-align: center;
  line-height: 60px;
}


.title{
  transform: rotate(-5deg);
  margin: 0 auto;
  display: block;
}







form {
  width:500px;
  margin:0 auto;
  margin-bottom: 50px;
}
.search {
  width: 300px;
  height: 30px;
  background:rgba(50, 50, 50, 0.2);
  border:0px solid #dbdbdb;
  border-radius: 7px;
  text-align: center;
  color: white;
  outline: none;

}

.btnsearch {
  width: 50px;
  height: 31px;
  border-radius: 0px 7px 7px 0px;
  position:relative;
  border:2px solid #207cca;
  background-color:#207cca;
  color:#fafafa;
  left: -10px;
}
.btnsearch:hover  {
  background-color:#fafafa;
  color:#207cca;
}






















.icon-div {
  display: inline-block;
  padding: 20px;
}


.icon{
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
  display: table-cell;
  vertical-align: middle;
  color: white;
  border-radius: 35px;
  width: 180px;
  height: 180px;
  text-align: center;
  margin-bottom: 20px;
  /*background: #007991;  /* fallback for old browsers */
  /*background: -webkit-linear-gradient(to bottom, #78ffd6, #007991);  /* Chrome 10-25, Safari 5.1-6 */
  /*background: linear-gradient(to bottom, #78ffd6, #007991); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

@media only screen and (max-width: 300px) {
  td {
      float: left;
      margin-right:10px;
      width: 45%;
  }
  td:nth-child(3) {
      clear: left;
  }
  .icon{
    width:100%!important;
    height:100%!important;
    margin-top: 50px;
  }
}

.icon:hover, .icon:focus, .icon:active {
  box-shadow: 0 50px 50px -50px rgba(0, 0, 0, 50);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}



.icontext{
  text-align: center;
  color: white;
  font-size: 30px;
}



table {
    border-spacing: 60px;
    border-collapse: separate;
}








.contactbtn{
  margin-right: 15px;
  color: white;
  border: 2px solid black;
  border-radius: 35px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19);
  width: 100px;
  height: 30px;
  text-align: center;
  justify-content: center;
  margin-top: 50px;
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;

  background: #007991;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #78ffd6, #007991);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #78ffd6, #007991); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.contactbtn:hover, .contactbtn:focus, .contactbtn:active {
  box-shadow: 0 50px 50px -50px rgba(0, 0, 0, 50);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Knowledge base</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" href="style.css">
      <script src="script.js" charset="utf-8"></script>

</head>

<body>
  <!--Title-->
  <section class="container">
  <h1>
    <br />
    <span class="title" >
       <label style="color:#e55643;">Burger</label><label style="color:#2b9f5e;">school</label>
    </span>
    <span class="title" style="color:#f1c83c;">afspraken</span>
  </h1>
</section>

<!--Zoekbalk-->
<form align="center">
    <input type="text" placeholder="Zoek iets op..." class="search">
    <input type="button" value="Zoek" class="btnsearch">
</form>

<!--Icoontjes-->
<div style="text-align: center;">

  <div class="icon-div" style="display: inline-block;">
    <a href="afspraken.html">
      <img src="https://www.icloud.com/system/cloudos/17BHotfix5/cloudos_foundation/17BHotfix5/en-us/source/resources/images/app_icons/[email protected]" class="icon">
    </a>
    <span class="icontext">Afspraken</span>
  </div>

  <div class="icon-div">
    <img src="https://www.icloud.com/system/cloudos/17BHotfix5/cloudos_foundation/17BHotfix5/en-us/source/resources/images/app_icons/[email protected]" class="icon">
    <span class="icontext">Situaties</span>
  </div>

  <div class="icon-div">
    <img src="controlcenter.png" class="icon">
    <span class="icontext">Grenzen</span>
  </div>

  <div class="icon-div">
    <img src="Multitaks.png" class="icon">
    <span class="icontext">Categoriëen</span>
  </div>

</div>

<div style="text-align: center;">
  <input type="button" value="contact" class="contactbtn">
</div>


<!--Contact-->
</body>

</html>

Upvotes: 0

Views: 227

Answers (4)

Codemaker2015
Codemaker2015

Reputation: 1

Please add the meta tag in your page <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

Upvotes: 0

Kavitha Jayan
Kavitha Jayan

Reputation: 21

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

Add the above inside <head> tag.

Please try below media queries along with other styles:

 @media only screen and (max-width: 1024px){
      .icon-div .icon {
        width: 100%;
        height: 100%;
        max-width: 140px;
      }
    }
    @media only screen and (max-width: 767px){
      .icon-div .icon {
        width: 100%;
        height: 100%;
        max-width: 100px;
      }
      .icontext {
        font-size: 20px;
      }
    }
    @media only screen and (max-width: 420px){
      .icon-div .icon {
        width: 100%;
        height: 100%;
        max-width: 100px;
      }
    }

Upvotes: 2

VvV
VvV

Reputation: 1588

You can use this media query for iPhone.

@media only screen and (max-width: 480px){
  form{width:100%}
  .icon-div{width:30%}
  .icon-div .icon {width: 100%;height: 100%}

}

See full code

@import url(https://fonts.googleapis.com/css?family=Fjalla+One);

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

body{
  font-family: 'Fjalla One', sans-serif;
  background: #2C3E50;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to top, #4CA1AF, #2C3E50);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to top, #4CA1AF, #2C3E50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background-repeat: no-repeat;

}

.container{
  margin: auto;
}


h1{
  text-transform: uppercase;
  font-size: 60px;
  line-height: 47px;
  letter-spacing: 2px;
  text-shadow: #533d4a 1px 1px, #533d4a 2px 2px, #533d4a 3px 3px, #533d4a 4px 4px;
  text-align: center;
  line-height: 60px;
}


.title{
  transform: rotate(-5deg);
  margin: 0 auto;
  display: block;
}







form {
  width:500px;
  margin:0 auto;
  margin-bottom: 50px;
}
.search {
  width: 300px;
  height: 30px;
  background:rgba(50, 50, 50, 0.2);
  border:0px solid #dbdbdb;
  border-radius: 7px;
  text-align: center;
  color: white;
  outline: none;

}

.btnsearch {
  width: 50px;
  height: 31px;
  border-radius: 0px 7px 7px 0px;
  position:relative;
  border:2px solid #207cca;
  background-color:#207cca;
  color:#fafafa;
  left: -10px;
}
.btnsearch:hover  {
  background-color:#fafafa;
  color:#207cca;
}






















.icon-div {
  display: inline-block;
  padding: 20px;
}


.icon{
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
  display: table-cell;
  vertical-align: middle;
  color: white;
  border-radius: 35px;
  width: 180px;
  height: 180px;
  text-align: center;
  margin-bottom: 20px;
  /*background: #007991;  /* fallback for old browsers */
  /*background: -webkit-linear-gradient(to bottom, #78ffd6, #007991);  /* Chrome 10-25, Safari 5.1-6 */
  /*background: linear-gradient(to bottom, #78ffd6, #007991); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

@media only screen and (max-width: 300px) {
  td {
      float: left;
      margin-right:10px;
      width: 45%;
  }
  td:nth-child(3) {
      clear: left;
  }
  .icon{
    width:100%!important;
    height:100%!important;
    margin-top: 50px;
  }
}



.icon:hover, .icon:focus, .icon:active {
  box-shadow: 0 50px 50px -50px rgba(0, 0, 0, 50);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}



.icontext{
  text-align: center;
  color: white;
  font-size: 30px;
}



table {
    border-spacing: 60px;
    border-collapse: separate;
}








.contactbtn{
  margin-right: 15px;
  color: white;
  border: 2px solid black;
  border-radius: 35px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19);
  width: 100px;
  height: 30px;
  text-align: center;
  justify-content: center;
  margin-top: 50px;
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;

  background: #007991;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #78ffd6, #007991);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #78ffd6, #007991); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.contactbtn:hover, .contactbtn:focus, .contactbtn:active {
  box-shadow: 0 50px 50px -50px rgba(0, 0, 0, 50);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}


@media only screen and (max-width: 480px){
  form{width:100%}
  .icon-div{width:30%}
  .icon-div .icon {width: 100%;height: 100%}
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Knowledge base</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
 @import url(https://fonts.googleapis.com/css?family=Fjalla+One);

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

body{
  font-family: 'Fjalla One', sans-serif;
  background: #2C3E50;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to top, #4CA1AF, #2C3E50);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to top, #4CA1AF, #2C3E50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background-repeat: no-repeat;

}

.container{
  margin: auto;
}


h1{
  text-transform: uppercase;
  font-size: 60px;
  line-height: 47px;
  letter-spacing: 2px;
  text-shadow: #533d4a 1px 1px, #533d4a 2px 2px, #533d4a 3px 3px, #533d4a 4px 4px;
  text-align: center;
  line-height: 60px;
}


.title{
  transform: rotate(-5deg);
  margin: 0 auto;
  display: block;
}



form {
  width:500px;
  margin:0 auto;
  margin-bottom: 50px;
}
.search {
  width: 300px;
  height: 30px;
  background:rgba(50, 50, 50, 0.2);
  border:0px solid #dbdbdb;
  border-radius: 7px;
  text-align: center;
  color: white;
  outline: none;

}

.btnsearch {
  width: 50px;
  height: 31px;
  border-radius: 0px 7px 7px 0px;
  position:relative;
  border:2px solid #207cca;
  background-color:#207cca;
  color:#fafafa;
  left: -10px;
}
.btnsearch:hover  {
  background-color:#fafafa;
  color:#207cca;
}



.icon-div {
  display: inline-block;
  padding: 20px;
}


.icon{
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
  display: table-cell;
  vertical-align: middle;
  color: white;
  border-radius: 35px;
  width: 180px;
  height: 180px;
  text-align: center;
  margin-bottom: 20px;
  /*background: #007991;  /* fallback for old browsers */
  /*background: -webkit-linear-gradient(to bottom, #78ffd6, #007991);  /* Chrome 10-25, Safari 5.1-6 */
  /*background: linear-gradient(to bottom, #78ffd6, #007991); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

@media only screen and (max-width: 300px) {
  td {
      float: left;
      margin-right:10px;
      width: 45%;
  }
  td:nth-child(3) {
      clear: left;
  }
  .icon{
    width:100%!important;
    height:100%!important;
    margin-top: 50px;
  }
}



.icon:hover, .icon:focus, .icon:active {
  box-shadow: 0 50px 50px -50px rgba(0, 0, 0, 50);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}



.icontext{
  text-align: center;
  color: white;
  font-size: 30px;
}



table {
    border-spacing: 60px;
    border-collapse: separate;
}


.contactbtn{
  margin-right: 15px;
  color: white;
  border: 2px solid black;
  border-radius: 35px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19);
  width: 100px;
  height: 30px;
  text-align: center;
  justify-content: center;
  margin-top: 50px;
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;

  background: #007991;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #78ffd6, #007991);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #78ffd6, #007991); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.contactbtn:hover, .contactbtn:focus, .contactbtn:active {
  box-shadow: 0 50px 50px -50px rgba(0, 0, 0, 50);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}


  </style>
</head>

<body>
  <!--Title-->
  <section class="container">
  <h1>
    <br />
    <span class="title" >
       <label style="color:#e55643;">Burger</label><label style="color:#2b9f5e;">school</label>
    </span>
    <span class="title" style="color:#f1c83c;">afspraken</span>
  </h1>
</section>

<!--Zoekbalk-->
<form align="center">
    <input type="text" placeholder="Zoek iets op..." class="search">
    <input type="button" value="Zoek" class="btnsearch">
</form>

<!--Icoontjes-->
<div style="text-align: center;">

  <div class="icon-div" style="display: inline-block;">
    <a href="afspraken.html">
      <img src="https://www.icloud.com/system/cloudos/17BHotfix5/cloudos_foundation/17BHotfix5/en-us/source/resources/images/app_icons/[email protected]" class="icon">
    </a>
    <span class="icontext">Afspraken</span>
  </div>

  <div class="icon-div">
    <img src="https://www.icloud.com/system/cloudos/17BHotfix5/cloudos_foundation/17BHotfix5/en-us/source/resources/images/app_icons/[email protected]" class="icon">
    <span class="icontext">Situaties</span>
  </div>

  <div class="icon-div">
    <img src="controlcenter.png" class="icon">
    <span class="icontext">Grenzen</span>
  </div>

  <div class="icon-div">
    <img src="Multitaks.png" class="icon">
    <span class="icontext">Categoriëen</span>
  </div>

</div>

<div style="text-align: center;">
  <input type="button" value="contact" class="contactbtn">
</div>


<!--Contact-->
</body>

</html>

Upvotes: 1

Tijo
Tijo

Reputation: 1

please try below CSS to your stylesheet:

.icontext {
    display: block;
}

Upvotes: 0

Related Questions