CODEWITHSUNDEEP
htmlcssmedia-queriesresponsive
Maarten Nauta
Maarten Nauta

Reputation: 3

My website is responsive but it doesnt react at the right sizes

So i made a responsive website but the website doesnt change when it should. The website that i link below this shows that on my Iphone 6 Plus it should be formatted correctly but when i check the website on my iphone its in tablet view mode.

And you can check what i mean here http://quirktools.com/screenfly/#u=http%3A//maartennauta.com&w=1024&h=600&s=1

the CSS code

html * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}

body {
  margin-left: auto;
  margin-right: auto;
}

header {
  padding-bottom: 1px;
}

footer {
  text-align: center;
}

.logo {
  border-radius: 10px;
  height: 100px;
  margin-top: 15px;
  margin-bottom: 5px;
  width: 178px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

.style-nav ul {
  list-style-type: none;
  text-align: center;
}

.style-nav ul li a {
  text-decoration: none;
  color: #2F322A;
  text-align: center;
  display: block;
  text-transform: uppercase;
  padding: 8px;
}

.style-nav ul li a:hover {
  color: black;
  text-shadow: 2px 2px 10px #000000;
  transition: 0.5s ease;
  -webkit-transition: 0.5s ease;
}

.hero {
  background-image: url(../Images/Background.jpg);
  background-size: cover;
  padding-top: 15px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 50px;
  color: #FFFFFF;
  text-align: center;
}

.infobox-tan {
  background-color: #C29D73;
  color: #FFFFFF;
  padding: 30px 20px 60px;
  text-align: center;
}

.infobox-grey {
  background-color: #717A84;
  color: #FFFFFF;
  padding: 30px 20px 60px;
  text-align: center;
}

.row:before,
.row:after {
  content: "";
  display: table;
  color: #FFFFFF;
  text-align: center;
}

h1.small {
  font-size: 30px;
  text-transform: uppercase;
  font-weight: 200;
  margin-bottom: 60px;
}

h2 {
  font-size: 25px;
  text-transform: uppercase;
  font-weight: 100;
  margin-bottom: 20px;
  padding: 30px
}

h3 {
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 200;
  margin-bottom: 60px;
}

h4 {
  font-size: 16px;
  font-weight: 200;
  margin-bottom: 35px;
}

p {
  font-size: 15px;
  text-transform: none;
  font-weight: 20;
  margin-bottom: 60px;
}

p.footertext {
  color: gray;
  font-size: 15px;
  text-transform: none;
  font-weight: 20;
  margin-top: 20px;
  margin-bottom: 20px;
}

.button {
  border-radius: 30px;
  border: 2px #FFFFFF solid;
  padding: 8px 15px;
  color: #FFFFFF;
  text-decoration: none;
  margin-bottom: 30px;
}

.button:hover {
  color: #242424;
  border: 2px #242424 solid;
  transition: 0.5s ease;
  -webkit-transition: 0.5s ease;
}

.row:after {
  clear: both;
}

.col {
  width: 100%;
}


/*Tablet View*/

@media (min-width: 700px) {
  .style-logo {
    float: center;
  }
  body {
    max-width: 778px;
  }
  .style-nav ul li {
    display: inline-block;
  }
  h1.normal {
    font-size: 57px;
    text-transform: uppercase;
    font-weight: 200;
    margin-bottom: 60px;
  }
  .row:before,
  .row:after {
    content: "";
    display: table;
    padding: 5px;
    color: #FFFFFF;
    text-align: center;
  }
  .col-tablet {
    width: 50%;
  }
  .col {
    float: left;
    padding-bottom: 14px;
    padding-left: 7px;
    padding-right: 7px;
  }
}


/*Desktop View*/

@media (min-width: 1024px) {
  .style-logo {
    float: center;
  }
  .style-nav {
    float: center;
  }
  .col-desktop {
    width: 25%;
  }
  body {
    max-width: 1200px;
  }
}
<!doctype html>
<html>

<head>
  <link href="CSS/Styles.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <meta charset="utf-8">
  <title>Home</title>
</head>

<body>
  <header>
    <div class="row">
      <div class="col">
        <img class="logo" src="Images/Logo company.png" alt="Logo">
        <nav class="style-nav">
          <ul>
            <li><a href="#">Education</a></li>
            <li><a href="#">Photos</a></li>
            <li><a href="#">Services</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
  <main>
    <div class="row">
      <div class="col">
        <div class="hero">
          <h3>Editor's Choice</h3>
          <h4>Maarten Nauta</h4>
          <h1 class="normal small">Webdesign</h1>
          <a href="#" class="button">Read More</a>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col col-tablet">
        <div class="infobox-tan">
          <h2>Education</h2>
          <p>And a summary of my achievements</p>
          <a href="#" class="button">Read More</a>
        </div>
      </div>
      <div class="col col-tablet">
        <div class="infobox-grey">
          <h2>Services</h2>
          <p>Graphic/Web design - Video/Photo editing</p>
          <a href="#" class="button">Read More</a>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col col-tablet col-desktop"><img src="Images/Stock-img-1.jpeg.jpg" alt="1"></div>
      <div class="col col-tablet col-desktop"><img src="Images/Stock-img-2.jpeg.jpg" alt="2"></div>
      <div class="col col-tablet col-desktop"><img src="Images/Stock-img-3.jpeg.jpg" alt="3"></div>
      <div class="col col-tablet col-desktop"><img src="Images/Stock-img-4.jpeg.jpg" alt="4"></div>
    </div>

  </main>
  <footer>
    <div class="row">
      <div class="col">
        <p class="footertext">©2018 Maarten Nauta</p>

      </div>
    </div>
  </footer>
</body>

</html>

Upvotes: 0

Views: 69

Answers (2)

dave
dave

Reputation: 2936

Your iPhone has more pixels per inch than a standard desktop screen, and is in fact >700 pixels wide. In order to get a webpage to treat pixels as a unit of screen screen size you need a meta viewport tag

<meta name="viewport" content="width=device-width, initial-scale=1">

With this tag your media queries will operate as though the screen is the standard 72 ppi.

Upvotes: 1

dippas
dippas

Reputation: 60543

You are missing the viewport meta tag

(...) Apple introduced the "viewport meta tag" in Safari iOS to let web developers control the viewport's size and scale. Many other mobile browsers now support this tag, although it is not part of any web standard. Apple's documentation does a good job explaining how web developers can use this tag, but we had to do some detective work to figure out exactly how to implement it in Fennec. For example, Safari's documentation says the content is a "comma-delimited list," but existing browsers and web pages use any mix of commas, semicolons, and spaces as separators.

<meta name="viewport" content="width=device-width, initial-scale=1">

Upvotes: 1

Related Questions