Why is the viewport met-tag not working as expected
up vote
0
down vote
favorite
Im having some problems with this web page that I am building out. The code is pasted below but you can also take a look at it here: www.petermingione.com/Webcast2/
When the page loads on mobile devices the page is zoomed in and I have to pinch to get the zoom to the initial scale. I am confused as to why this is happening since I have included the viewport meta-tag:
Thank you very much for any help that you can give me. Pete
HTML:
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Lorem ipsum dolor sit amet</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- strongly recommended by the Bootstrap -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<div class="container">
<header class="header">
<div class="tbl-row">
<div class="header-left">
<h1>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing</span><br/>
Excepteur sint occaecat cupidatat<br/>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
</h1>
</div>
<div class="header-spacer"></div>
<div class="header-right">
<p>Ut enim ad minim veniam, quis nostrud</p>
</div>
</div>
</header>
<div class="small-box"></div>
<!-- CENTER TABLE -->
<div class= "center-table">
<!-- CENTER ROW -->
<div class= "center-row">
<div class="vert-spacer"></div>
<!-- MAIN -->
<main>
<div class="main-body">
<div class="main-body-header">
<p><strong>WEBCAST</strong>TRANSMITTED LIVE ON</p>
<p>Sunday, 9 December 2018, 3:00 (EST) from New York, NY</p>
<div class="hr"></div>
<p><strong>Webcast:</strong><em>To View From Your Home or Office, Register at:</em></p>
<p>www.irure dolor in reprehenderit.com</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
<p class="foot-note">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
<p class="co-chairs"><span>Co-Chairs:</span> John Jones (Brazil), George Orwell (London, England)</p>
<table class="table">
<thead>
<tr class="header">
<th colspan="3">agenda</th>
</tr>
</thead>
<tbody>
<tr>
<td>09:00 – 09:05</td>
<td>Welcome and Introduction</td>
<td>Co-Chairs</td>
</tr>
<tr>
<td>09:05 – 09:30</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
<td>John Jones</td>
</tr>
<tr class="qa">
<td>09:30 – 09:35</td>
<td colspan="2">Q&A</td>
</tr>
<tr>
<td>09:35 – 10:00</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
<td>George Orwell</td>
</tr>
<tr class="qa">
<td>10:00 – 10:05</td>
<td colspan="2">Q&A</td>
</tr>
<tr>
<td>10:05 – 10:30</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
<td>Who Cares</td>
</tr>
<tr class="qa">
<td>10:30 – 10:35</td>
<td colspan="2">Q&A</td>
</tr>
<tr class="break">
<td>10:35 – 11:05</td>
<td colspan="2">Break</td>
</tr>
<tr>
<td>11:05 – 11:30</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
<td>Sam Man</td>
</tr>
<tr class="qa">
<td>11:30 – 11:35</td>
<td colspan="2">Q&A</td>
</tr>
<tr>
<td>11:35 – 12:35</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
<td>Faculty</td>
</tr>
<tr>
<td>12:35 – 12:45</td>
<td>Closing Remarks</td>
<td>Co-Chairs</td>
</tr>
</tbody>
</table>
<!-- /table -->
</div>
<!-- /main-body -->
</main>
<!-- /MAIN -->
<!-- ASIDE -->
<aside>
<div class="main-body">
<p class="list-header">Co-Chairs</p>
<ul class="faculty-list">
<li>
<span>John Jacob</span><br/>
Expert in Stuff<br/>
Lorum ipsum Division<br/>
Department of Lorem Ipsum<br/>
200 Car Talk Tower, Dewey Cheatum & Howe<br/>
Cambridge, MA
</li>
<li>
<span>John Jacob</span><br/>
Expert in Stuff<br/>
Lorum ipsum Division<br/>
Department of Lorem Ipsum<br/>
200 Car Talk Tower, Dewey Cheatum & Howe<br/>
Cambridge, MA
</li>
</ul>
<p class="list-header">faculty</p>
<ul class="faculty-list">
<li>
<span>John Jacob</span><br/>
Expert in Stuff<br/>
Lorum ipsum Division<br/>
Department of Lorem Ipsum<br/>
200 Car Talk Tower, Dewey Cheatum & Howe<br/>
Cambridge, MA
</li>
<li>
<span>John Jacob</span><br/>
Expert in Stuff<br/>
Lorum ipsum Division<br/>
Department of Lorem Ipsum<br/>
200 Car Talk Tower, Dewey Cheatum & Howe<br/>
Cambridge, MA
</li>
<li>
<span>John Jacob</span><br/>
Expert in Stuff<br/>
Lorum ipsum Division<br/>
Department of Lorem Ipsum<br/>
200 Car Talk Tower, Dewey Cheatum & Howe<br/>
Cambridge, MA
</li>
<li>
<span>John Jacob</span><br/>
Expert in Stuff<br/>
Lorum ipsum Division<br/>
Department of Lorem Ipsum<br/>
200 Car Talk Tower, Dewey Cheatum & Howe<br/>
Cambridge, MA
</li>
</ul>
</div>
<!-- /main-body -->
</aside>
<!-- /ASIDE -->
</div>
<!-- /CENTER ROW -->
</div>
<!-- /CENTER TABLE -->
<!-- FOOTER -->
<footer>
<p>
Copyright © 2018 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt<br/>
XXX-999999-YY
</p>
<div class="logo">LOGO GOES HERE</div>
</footer>
<!-- /FOOTER-->
</div>
<!-- /container -->
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
html {
font-size: 16px;
}
html, body, p {
margin: 0;
padding: 0;
}
body {
font-family: "Arial Narrow", Helvetica, sans-serif;
color: black;
font-size: 16px;
font-size: 1rem;
}
p {
line-height: 1;
margin: 0;
padding: 0;
}
.container {
padding: 0;
max-width: 1239px;
margin: 0 auto;
margin-bottom: -137px;
width: fit-content;
}
header {
display: table;
vertical-align: top;
height: 200px;
z-index: 1004;
}
.header-left {
display: table-cell;
vertical-align: top;
width: 78%;
color: #fff;
background-color: #00948f;
box-shadow: 7px 15px 18px #aaa;
-webkit-box-shadow: 7px 15px 18px #aaa;
position: relative;
}
.header-left h1 {
font-size: 50px;
font-size: 3.125rem;
margin: 0;
letter-spacing: 2px;
background-color: #00948f;
width: 100%;
padding: 20px 85px 30px 138px;
line-height: 1.1;
margin: 0;
}
.header-left h1 span {
font-size: 30px;
font-size: 1.875rem;
line-height: 1;
display: inline-block;
margin-bottom: 20px;
}
.header-spacer {
display: table-cell;
width: 2%;
}
.header-right {
display: table-cell;
width: 21%;
background-color: #9fd2d0;
box-shadow: 7px 15px 18px #aaa;
-webkit-box-shadow: 7px 15px 18px #aaa;
z-index: 1002;
padding: 175px 61px 0 20px;
line-height: 1.3;
font-size: 28px;
font-size: 1.75rem;
}
.small-box {
width: 8%;
height: 33px;
background-color: #9fd2d0;
z-index: 1005;
padding: 0;
}
.center-table {
display: table;
width: 100%;
margin-top: 10px;
}
.center-row {
display: table-row;
}
.vert-spacer {
display: table-cell;
background-color: #e6e7e8;
z-index: -2;
width: 8%;
}
main {
display: table-cell;
width: 69%;
}
.main-body {
margin-left: 20px;
height: 100%;
}
.main-body p:first-child {
font-size: 44px;
font-size: 2.75rem;
}
.main-body p:nth-child(2) {
font-size: 27px;
font-size: 1.6875rem;
}
.main-body .hr {
border-top: 10px solid white;
margin: 20px 0;
}
.main-body p:nth-child(3) {
font-size: 27px;
font-size: 1.6875px;
}
.main-body-header {
background-color: #9fd2d0;
padding: 10px 25px 15px;
margin-bottom: 20px;
}
.main-body-header p:first-child {
font-size: 44px;
font-size: 2.75rem;
margin-bottom: 10px;
}
.main-body-header p:nth-child(2) {
font-size: 27px;
font-size: 1.6875rem;
}
.main-body-header hr {
border-width: 10px;
}
.main-body-header p:nth-child(4) {
font-size: 30px;
font-size: 1.875rem;
text-align: center;
margin-bottom: 5px;
}
.main-body-header p:nth-child(5) {
font-size: 24px;
font-size: 1.5rem;
text-align: center;
margin-bottom: 10px;
}
.main-body-header p:nth-child(6) {
font-size: 24px;
font-size: 1.5rem;
}
.foot-note {
font-size: 20px !important;
font-size: 1.25rem !important;
margin-bottom: 1.25rem;
}
.co-chairs {
font-size: 22px !important;
font-size: 1.375rem !important;
margin-bottom: 20px;
}
.co-chairs span {
color: #00837c;
}
table {
font-size: 23px;
font-size: 1.4375rem;
border-collapse: collapse;
}
table th {
text-align: left;
padding-left: 20px;
}
table tr td {
padding: 5px;
}
table tr td:first-child {
width: 20%;
}
table tr td:nth-child(2) {
width: 55%;
}
table tr td:nth-child(3) {
width: 25%;
text-align: right;
padding-right: 20px;
}
table tr.header {
text-transform: uppercase;
font-size: 28px;
font-size: 1.75rem;
background-color: #00948f;
color: white;
}
table tr.header th {
border-top: 5px solid black;
}
table tr:not(agenda) td {
border-bottom: 3px solid #00948f;
}
table tr.qa {
background-color: #e5f4f4;
}
table tr.break {
background-color: #cdeae9;
}
aside {
padding: 0 20px;
display: table-cell;
width: 21%;
text-align: top;
}
aside .list-header {
text-transform: uppercase;
color: #004a99;
font-size: 28px !important;
font-size: 1.75rem !important;
margin-bottom: 10px;
}
aside .faculty-list {
list-style: none;
padding: 0;
font-size: 18px;
font-size: 1.125rem;
color: #a0a0a0;
}
aside .faculty-list li {
margin-bottom: 15px;
}
aside .faculty-list li span {
display: inline-block;
color: black;
font-size: 23px;
font-size: 1.277777778rem;
}
footer {
position: absolute;
left: 0;
right: 0;
bottom: 137px;
z-index: 10000;
position: relative;
min-width: 420px;
background-color: #00948f;
width: 100%;
height: 402px;
z-index: -2;
}
footer p {
position: absolute;
left: 20px;
bottom: 30px;
font-size: 19px;
font-size: 1.1857rem;
line-height: 1.3;
}
footer .logo {
position: absolute;
right: 60px;
bottom: 30px;
width: 90px;
height: 90px;
background-color: #9fd2d0;
display: inline-block;
}
@media screen and (max-width: 767px) {
.header-left,
.header-right {
display: block;
width: auto;
}
.header-left {
margin: 0 20px;
}
.header-left h1 {
font-size: 40px !important;
font-size: 2.5rem !important;
padding: 20px !important;
}
.header-left h1 span {
font-size: 15px !important;
font-size: 0.9375rem !important;
}
.header-right {
padding: 20px !important;
margin: 30px 20px 0;
}
.small-box {
display: none;
}
.vert-spacer {
display: none;
}
main, aside {
display: block;
width: auto;
}
.main-body {
margin: 20px;
}
.main-body-header p:first-child {
text-align: center;
font-size: 40px;
font-size: 2.5rem;
}
}
@media screen and (max-width: 1120px) {
footer p {
bottom: 100px;
}
footer .logo {
right: auto;
left: 20px;
bottom: 5px;
}
}
html css responsive-design responsive meta-tags
edited Nov 9 at 16:28
Adriani6
4,04421023
asked Nov 9 at 16:15
Peter Mingione
236
add a comment |
up vote
0
down vote
favorite
Im having some problems with this web page that I am building out. The code is pasted below but you can also take a look at it here: www.petermingione.com/Webcast2/
When the page loads on mobile devices the page is zoomed in and I have to pinch to get the zoom to the initial scale. I am confused as to why this is happening since I have included the viewport meta-tag:
Thank you very much for any help that you can give me. Pete
HTML:
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Lorem ipsum dolor sit amet</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- strongly recommended by the Bootstrap -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<div class="container">
<header class="header">
<div class="tbl-row">
<div class="header-left">
<h1>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing</span><br/>
Excepteur sint occaecat cupidatat<br/>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
</h1>
</div>
<div class="header-spacer"></div>
<div class="header-right">
<p>Ut enim ad minim veniam, quis nostrud</p>
</div>
</div>
</header>
<div class="small-box"></div>
<!-- CENTER TABLE -->
<div class= "center-table">
<!-- CENTER ROW -->
<div class= "center-row">
<div class="vert-spacer"></div>
<!-- MAIN -->
<main>
<div class="main-body">
<div class="main-body-header">
<p><strong>WEBCAST</strong>TRANSMITTED LIVE ON</p>
<p>Sunday, 9 December 2018, 3:00 (EST) from New York, NY</p>
<div class="hr"></div>
<p><strong>Webcast:</strong><em>To View From Your Home or Office, Register at:</em></p>
<p>www.irure dolor in reprehenderit.com</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
<p class="foot-note">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
<p class="co-chairs"><span>Co-Chairs:</span> John Jones (Brazil), George Orwell (London, England)</p>
<table class="table">
<thead>
<tr class="header">
<th colspan="3">agenda</th>
</tr>
</thead>
<tbody>
<tr>
<td>09:00 – 09:05</td>
<td>Welcome and Introduction</td>
<td>Co-Chairs</td>
</tr>
<tr>
<td>09:05 – 09:30</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
<td>John Jones</td>
</tr>
<tr class="qa">
<td>09:30 – 09:35</td>
<td colspan="2">Q&A</td>
</tr>
<tr>
<td>09:35 – 10:00</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
<td>George Orwell</td>
</tr>
<tr class="qa">
<td>10:00 – 10:05</td>
<td colspan="2">Q&A</td>
</tr>
<tr>
<td>10:05 – 10:30</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
<td>Who Cares</td>
</tr>
<tr class="qa">
<td>10:30 – 10:35</td>
<td colspan="2">Q&A</td>
</tr>
<tr class="break">
<td>10:35 – 11:05</td>
<td colspan="2">Break</td>
</tr>
<tr>
<td>11:05 – 11:30</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
<td>Sam Man</td>
</tr>
<tr class="qa">
<td>11:30 – 11:35</td>
<td colspan="2">Q&A</td>
</tr>
<tr>
<td>11:35 – 12:35</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
<td>Faculty</td>
</tr>
<tr>
<td>12:35 – 12:45</td>
<td>Closing Remarks</td>
<td>Co-Chairs</td>
</tr>
</tbody>
</table>
<!-- /table -->
</div>
<!-- /main-body -->
</main>
<!-- /MAIN -->
<!-- ASIDE -->
<aside>
<div class="main-body">
<p class="list-header">Co-Chairs</p>
<ul class="faculty-list">
<li>
<span>John Jacob</span><br/>
Expert in Stuff<br/>
Lorum ipsum Division<br/>
Department of Lorem Ipsum<br/>
200 Car Talk Tower, Dewey Cheatum & Howe<br/>
Cambridge, MA
</li>
<li>
<span>John Jacob</span><br/>
Expert in Stuff<br/>
Lorum ipsum Division<br/>
Department of Lorem Ipsum<br/>
200 Car Talk Tower, Dewey Cheatum & Howe<br/>
Cambridge, MA
</li>
</ul>
<p class="list-header">faculty</p>
<ul class="faculty-list">
<li>
<span>John Jacob</span><br/>
Expert in Stuff<br/>
Lorum ipsum Division<br/>
Department of Lorem Ipsum<br/>
200 Car Talk Tower, Dewey Cheatum & Howe<br/>
Cambridge, MA
</li>
<li>
<span>John Jacob</span><br/>
Expert in Stuff<br/>
Lorum ipsum Division<br/>
Department of Lorem Ipsum<br/>
200 Car Talk Tower, Dewey Cheatum & Howe<br/>
Cambridge, MA
</li>
<li>
<span>John Jacob</span><br/>
Expert in Stuff<br/>
Lorum ipsum Division<br/>
Department of Lorem Ipsum<br/>
200 Car Talk Tower, Dewey Cheatum & Howe<br/>
Cambridge, MA
</li>
<li>
<span>John Jacob</span><br/>
Expert in Stuff<br/>
Lorum ipsum Division<br/>
Department of Lorem Ipsum<br/>
200 Car Talk Tower, Dewey Cheatum & Howe<br/>
Cambridge, MA
</li>
</ul>
</div>
<!-- /main-body -->
</aside>
<!-- /ASIDE -->
</div>
<!-- /CENTER ROW -->
</div>
<!-- /CENTER TABLE -->
<!-- FOOTER -->
<footer>
<p>
Copyright © 2018 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt<br/>
XXX-999999-YY
</p>
<div class="logo">LOGO GOES HERE</div>
</footer>
<!-- /FOOTER-->
</div>
<!-- /container -->
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
html {
font-size: 16px;
}
html, body, p {
margin: 0;
padding: 0;
}
body {
font-family: "Arial Narrow", Helvetica, sans-serif;
color: black;
font-size: 16px;
font-size: 1rem;
}
p {
line-height: 1;
margin: 0;
padding: 0;
}
.container {
padding: 0;
max-width: 1239px;
margin: 0 auto;
margin-bottom: -137px;
width: fit-content;
}
header {
display: table;
vertical-align: top;
height: 200px;
z-index: 1004;
}
.header-left {
display: table-cell;
vertical-align: top;
width: 78%;
color: #fff;
background-color: #00948f;
box-shadow: 7px 15px 18px #aaa;
-webkit-box-shadow: 7px 15px 18px #aaa;
position: relative;
}
.header-left h1 {
font-size: 50px;
font-size: 3.125rem;
margin: 0;
letter-spacing: 2px;
background-color: #00948f;
width: 100%;
padding: 20px 85px 30px 138px;
line-height: 1.1;
margin: 0;
}
.header-left h1 span {
font-size: 30px;
font-size: 1.875rem;
line-height: 1;
display: inline-block;
margin-bottom: 20px;
}
.header-spacer {
display: table-cell;
width: 2%;
}
.header-right {
display: table-cell;
width: 21%;
background-color: #9fd2d0;
box-shadow: 7px 15px 18px #aaa;
-webkit-box-shadow: 7px 15px 18px #aaa;
z-index: 1002;
padding: 175px 61px 0 20px;
line-height: 1.3;
font-size: 28px;
font-size: 1.75rem;
}
.small-box {
width: 8%;
height: 33px;
background-color: #9fd2d0;
z-index: 1005;
padding: 0;
}
.center-table {
display: table;
width: 100%;
margin-top: 10px;
}
.center-row {
display: table-row;
}
.vert-spacer {
display: table-cell;
background-color: #e6e7e8;
z-index: -2;
width: 8%;
}
main {
display: table-cell;
width: 69%;
}
.main-body {
margin-left: 20px;
height: 100%;
}
.main-body p:first-child {
font-size: 44px;
font-size: 2.75rem;
}
.main-body p:nth-child(2) {
font-size: 27px;
font-size: 1.6875rem;
}
.main-body .hr {
border-top: 10px solid white;
margin: 20px 0;
}
.main-body p:nth-child(3) {
font-size: 27px;
font-size: 1.6875px;
}
.main-body-header {
background-color: #9fd2d0;
padding: 10px 25px 15px;
margin-bottom: 20px;
}
.main-body-header p:first-child {
font-size: 44px;
font-size: 2.75rem;
margin-bottom: 10px;
}
.main-body-header p:nth-child(2) {
font-size: 27px;
font-size: 1.6875rem;
}
.main-body-header hr {
border-width: 10px;
}
.main-body-header p:nth-child(4) {
font-size: 30px;
font-size: 1.875rem;
text-align: center;
margin-bottom: 5px;
}
.main-body-header p:nth-child(5) {
font-size: 24px;
font-size: 1.5rem;
text-align: center;
margin-bottom: 10px;
}
.main-body-header p:nth-child(6) {
font-size: 24px;
font-size: 1.5rem;
}
.foot-note {
font-size: 20px !important;
font-size: 1.25rem !important;
margin-bottom: 1.25rem;
}
.co-chairs {
font-size: 22px !important;
font-size: 1.375rem !important;
margin-bottom: 20px;
}
.co-chairs span {
color: #00837c;
}
table {
font-size: 23px;
font-size: 1.4375rem;
border-collapse: collapse;
}
table th {
text-align: left;
padding-left: 20px;
}
table tr td {
padding: 5px;
}
table tr td:first-child {
width: 20%;
}
table tr td:nth-child(2) {
width: 55%;
}
table tr td:nth-child(3) {
width: 25%;
text-align: right;
padding-right: 20px;
}
table tr.header {
text-transform: uppercase;
font-size: 28px;
font-size: 1.75rem;
background-color: #00948f;
color: white;
}
table tr.header th {
border-top: 5px solid black;
}
table tr:not(agenda) td {
border-bottom: 3px solid #00948f;
}
table tr.qa {
background-color: #e5f4f4;
}
table tr.break {
background-color: #cdeae9;
}
aside {
padding: 0 20px;
display: table-cell;
width: 21%;
text-align: top;
}
aside .list-header {
text-transform: uppercase;
color: #004a99;
font-size: 28px !important;
font-size: 1.75rem !important;
margin-bottom: 10px;
}
aside .faculty-list {
list-style: none;
padding: 0;
font-size: 18px;
font-size: 1.125rem;
color: #a0a0a0;
}
aside .faculty-list li {
margin-bottom: 15px;
}
aside .faculty-list li span {
display: inline-block;
color: black;
font-size: 23px;
font-size: 1.277777778rem;
}
footer {
position: absolute;
left: 0;
right: 0;
bottom: 137px;
z-index: 10000;
position: relative;
min-width: 420px;
background-color: #00948f;
width: 100%;
height: 402px;
z-index: -2;
}
footer p {
position: absolute;
left: 20px;
bottom: 30px;
font-size: 19px;
font-size: 1.1857rem;
line-height: 1.3;
}
footer .logo {
position: absolute;
right: 60px;
bottom: 30px;
width: 90px;
height: 90px;
background-color: #9fd2d0;
display: inline-block;
}
@media screen and (max-width: 767px) {
.header-left,
.header-right {
display: block;
width: auto;
}
.header-left {
margin: 0 20px;
}
.header-left h1 {
font-size: 40px !important;
font-size: 2.5rem !important;
padding: 20px !important;
}
.header-left h1 span {
font-size: 15px !important;
font-size: 0.9375rem !important;
}
.header-right {
padding: 20px !important;
margin: 30px 20px 0;
}
.small-box {
display: none;
}
.vert-spacer {
display: none;
}
main, aside {
display: block;
width: auto;
}
.main-body {
margin: 20px;
}
.main-body-header p:first-child {
text-align: center;
font-size: 40px;
font-size: 2.5rem;
}
}
@media screen and (max-width: 1120px) {
footer p {
bottom: 100px;
}
footer .logo {
right: auto;
left: 20px;
bottom: 5px;
}
}
html css responsive-design responsive meta-tags
edited Nov 9 at 16:28
Adriani6
4,04421023
asked Nov 9 at 16:15
Peter Mingione
236
what browser / device are you testing?
– madeyejm
Nov 9 at 16:27
iPhone 6 Plus using the latest safari browser
– Peter Mingione
Nov 9 at 16:53
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
Im having some problems with this web page that I am building out. The code is pasted below but you can also take a look at it here: www.petermingione.com/Webcast2/
When the page loads on mobile devices the page is zoomed in and I have to pinch to get the zoom to the initial scale. I am confused as to why this is happening since I have included the viewport meta-tag:
Thank you very much for any help that you can give me. Pete
HTML:
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Lorem ipsum dolor sit amet</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- strongly recommended by the Bootstrap -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<div class="container">
<header class="header">
<div class="tbl-row">
<div class="header-left">
<h1>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing</span><br/>
Excepteur sint occaecat cupidatat<br/>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
</h1>
</div>
<div class="header-spacer"></div>
<div class="header-right">
<p>Ut enim ad minim veniam, quis nostrud</p>
</div>
</div>
</header>
<div class="small-box"></div>
<!-- CENTER TABLE -->
<div class= "center-table">
<!-- CENTER ROW -->
<div class= "center-row">
<div class="vert-spacer"></div>
<!-- MAIN -->
<main>
<div class="main-body">
<div class="main-body-header">
<p><strong>WEBCAST</strong>TRANSMITTED LIVE ON</p>
<p>Sunday, 9 December 2018, 3:00 (EST) from New York, NY</p>
<div class="hr"></div>
<p><strong>Webcast:</strong><em>To View From Your Home or Office, Register at:</em></p>
<p>www.irure dolor in reprehenderit.com</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
<p class="foot-note">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
<p class="co-chairs"><span>Co-Chairs:</span> John Jones (Brazil), George Orwell (London, England)</p>
<table class="table">
<thead>
<tr class="header">
<th colspan="3">agenda</th>
</tr>
</thead>
<tbody>
<tr>
<td>09:00 – 09:05</td>
<td>Welcome and Introduction</td>
<td>Co-Chairs</td>
</tr>
<tr>
<td>09:05 – 09:30</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
<td>John Jones</td>
</tr>
<tr class="qa">
<td>09:30 – 09:35</td>
<td colspan="2">Q&A</td>
</tr>
<tr>
<td>09:35 – 10:00</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
<td>George Orwell</td>
</tr>
<tr class="qa">
<td>10:00 – 10:05</td>
<td colspan="2">Q&A</td>
</tr>
<tr>
<td>10:05 – 10:30</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
<td>Who Cares</td>
</tr>
<tr class="qa">
<td>10:30 – 10:35</td>
<td colspan="2">Q&A</td>
</tr>
<tr class="break">
<td>10:35 – 11:05</td>
<td colspan="2">Break</td>
</tr>
<tr>
<td>11:05 – 11:30</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
<td>Sam Man</td>
</tr>
<tr class="qa">
<td>11:30 – 11:35</td>
<td colspan="2">Q&A</td>
</tr>
<tr>
<td>11:35 – 12:35</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
<td>Faculty</td>
</tr>
<tr>
<td>12:35 – 12:45</td>
<td>Closing Remarks</td>
<td>Co-Chairs</td>
</tr>
</tbody>
</table>
<!-- /table -->
</div>
<!-- /main-body -->
</main>
<!-- /MAIN -->
<!-- ASIDE -->
<aside>
<div class="main-body">
<p class="list-header">Co-Chairs</p>
<ul class="faculty-list">
<li>
<span>John Jacob</span><br/>
Expert in Stuff<br/>
Lorum ipsum Division<br/>
Department of Lorem Ipsum<br/>
200 Car Talk Tower, Dewey Cheatum & Howe<br/>
Cambridge, MA
</li>
<li>
<span>John Jacob</span><br/>
Expert in Stuff<br/>
Lorum ipsum Division<br/>
Department of Lorem Ipsum<br/>
200 Car Talk Tower, Dewey Cheatum & Howe<br/>
Cambridge, MA
</li>
</ul>
<p class="list-header">faculty</p>
<ul class="faculty-list">
<li>
<span>John Jacob</span><br/>
Expert in Stuff<br/>
Lorum ipsum Division<br/>
Department of Lorem Ipsum<br/>
200 Car Talk Tower, Dewey Cheatum & Howe<br/>
Cambridge, MA
</li>
<li>
<span>John Jacob</span><br/>
Expert in Stuff<br/>
Lorum ipsum Division<br/>
Department of Lorem Ipsum<br/>
200 Car Talk Tower, Dewey Cheatum & Howe<br/>
Cambridge, MA
</li>
<li>
<span>John Jacob</span><br/>
Expert in Stuff<br/>
Lorum ipsum Division<br/>
Department of Lorem Ipsum<br/>
200 Car Talk Tower, Dewey Cheatum & Howe<br/>
Cambridge, MA
</li>
<li>
<span>John Jacob</span><br/>
Expert in Stuff<br/>
Lorum ipsum Division<br/>
Department of Lorem Ipsum<br/>
200 Car Talk Tower, Dewey Cheatum & Howe<br/>
Cambridge, MA
</li>
</ul>
</div>
<!-- /main-body -->
</aside>
<!-- /ASIDE -->
</div>
<!-- /CENTER ROW -->
</div>
<!-- /CENTER TABLE -->
<!-- FOOTER -->
<footer>
<p>
Copyright © 2018 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt<br/>
XXX-999999-YY
</p>
<div class="logo">LOGO GOES HERE</div>
</footer>
<!-- /FOOTER-->
</div>
<!-- /container -->
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
html {
font-size: 16px;
}
html, body, p {
margin: 0;
padding: 0;
}
body {
font-family: "Arial Narrow", Helvetica, sans-serif;
color: black;
font-size: 16px;
font-size: 1rem;
}
p {
line-height: 1;
margin: 0;
padding: 0;
}
.container {
padding: 0;
max-width: 1239px;
margin: 0 auto;
margin-bottom: -137px;
width: fit-content;
}
header {
display: table;
vertical-align: top;
height: 200px;
z-index: 1004;
}
.header-left {
display: table-cell;
vertical-align: top;
width: 78%;
color: #fff;
background-color: #00948f;
box-shadow: 7px 15px 18px #aaa;
-webkit-box-shadow: 7px 15px 18px #aaa;
position: relative;
}
.header-left h1 {
font-size: 50px;
font-size: 3.125rem;
margin: 0;
letter-spacing: 2px;
background-color: #00948f;
width: 100%;
padding: 20px 85px 30px 138px;
line-height: 1.1;
margin: 0;
}
.header-left h1 span {
font-size: 30px;
font-size: 1.875rem;
line-height: 1;
display: inline-block;
margin-bottom: 20px;
}
.header-spacer {
display: table-cell;
width: 2%;
}
.header-right {
display: table-cell;
width: 21%;
background-color: #9fd2d0;
box-shadow: 7px 15px 18px #aaa;
-webkit-box-shadow: 7px 15px 18px #aaa;
z-index: 1002;
padding: 175px 61px 0 20px;
line-height: 1.3;
font-size: 28px;
font-size: 1.75rem;
}
.small-box {
width: 8%;
height: 33px;
background-color: #9fd2d0;
z-index: 1005;
padding: 0;
}
.center-table {
display: table;
width: 100%;
margin-top: 10px;
}
.center-row {
display: table-row;
}
.vert-spacer {
display: table-cell;
background-color: #e6e7e8;
z-index: -2;
width: 8%;
}
main {
display: table-cell;
width: 69%;
}
.main-body {
margin-left: 20px;
height: 100%;
}
.main-body p:first-child {
font-size: 44px;
font-size: 2.75rem;
}
.main-body p:nth-child(2) {
font-size: 27px;
font-size: 1.6875rem;
}
.main-body .hr {
border-top: 10px solid white;
margin: 20px 0;
}
.main-body p:nth-child(3) {
font-size: 27px;
font-size: 1.6875px;
}
.main-body-header {
background-color: #9fd2d0;
padding: 10px 25px 15px;
margin-bottom: 20px;
}
.main-body-header p:first-child {
font-size: 44px;
font-size: 2.75rem;
margin-bottom: 10px;
}
.main-body-header p:nth-child(2) {
font-size: 27px;
font-size: 1.6875rem;
}
.main-body-header hr {
border-width: 10px;
}
.main-body-header p:nth-child(4) {
font-size: 30px;
font-size: 1.875rem;
text-align: center;
margin-bottom: 5px;
}
.main-body-header p:nth-child(5) {
font-size: 24px;
font-size: 1.5rem;
text-align: center;
margin-bottom: 10px;
}
.main-body-header p:nth-child(6) {
font-size: 24px;
font-size: 1.5rem;
}
.foot-note {
font-size: 20px !important;
font-size: 1.25rem !important;
margin-bottom: 1.25rem;
}
.co-chairs {
font-size: 22px !important;
font-size: 1.375rem !important;
margin-bottom: 20px;
}
.co-chairs span {
color: #00837c;
}
table {
font-size: 23px;
font-size: 1.4375rem;
border-collapse: collapse;
}
table th {
text-align: left;
padding-left: 20px;
}
table tr td {
padding: 5px;
}
table tr td:first-child {
width: 20%;
}
table tr td:nth-child(2) {
width: 55%;
}
table tr td:nth-child(3) {
width: 25%;
text-align: right;
padding-right: 20px;
}
table tr.header {
text-transform: uppercase;
font-size: 28px;
font-size: 1.75rem;
background-color: #00948f;
color: white;
}
table tr.header th {
border-top: 5px solid black;
}
table tr:not(agenda) td {
border-bottom: 3px solid #00948f;
}
table tr.qa {
background-color: #e5f4f4;
}
table tr.break {
background-color: #cdeae9;
}
aside {
padding: 0 20px;
display: table-cell;
width: 21%;
text-align: top;
}
aside .list-header {
text-transform: uppercase;
color: #004a99;
font-size: 28px !important;
font-size: 1.75rem !important;
margin-bottom: 10px;
}
aside .faculty-list {
list-style: none;
padding: 0;
font-size: 18px;
font-size: 1.125rem;
color: #a0a0a0;
}
aside .faculty-list li {
margin-bottom: 15px;
}
aside .faculty-list li span {
display: inline-block;
color: black;
font-size: 23px;
font-size: 1.277777778rem;
}
footer {
position: absolute;
left: 0;
right: 0;
bottom: 137px;
z-index: 10000;
position: relative;
min-width: 420px;
background-color: #00948f;
width: 100%;
height: 402px;
z-index: -2;
}
footer p {
position: absolute;
left: 20px;
bottom: 30px;
font-size: 19px;
font-size: 1.1857rem;
line-height: 1.3;
}
footer .logo {
position: absolute;
right: 60px;
bottom: 30px;
width: 90px;
height: 90px;
background-color: #9fd2d0;
display: inline-block;
}
@media screen and (max-width: 767px) {
.header-left,
.header-right {
display: block;
width: auto;
}
.header-left {
margin: 0 20px;
}
.header-left h1 {
font-size: 40px !important;
font-size: 2.5rem !important;
padding: 20px !important;
}
.header-left h1 span {
font-size: 15px !important;
font-size: 0.9375rem !important;
}
.header-right {
padding: 20px !important;
margin: 30px 20px 0;
}
.small-box {
display: none;
}
.vert-spacer {
display: none;
}
main, aside {
display: block;
width: auto;
}
.main-body {
margin: 20px;
}
.main-body-header p:first-child {
text-align: center;
font-size: 40px;
font-size: 2.5rem;
}
}
@media screen and (max-width: 1120px) {
footer p {
bottom: 100px;
}
footer .logo {
right: auto;
left: 20px;
bottom: 5px;
}
}
html css responsive-design responsive meta-tags
edited Nov 9 at 16:28
Adriani6
4,04421023
asked Nov 9 at 16:15
Peter Mingione
236
Im having some problems with this web page that I am building out. The code is pasted below but you can also take a look at it here: www.petermingione.com/Webcast2/
When the page loads on mobile devices the page is zoomed in and I have to pinch to get the zoom to the initial scale. I am confused as to why this is happening since I have included the viewport meta-tag:
Thank you very much for any help that you can give me. Pete
HTML:
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Lorem ipsum dolor sit amet</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- strongly recommended by the Bootstrap -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<div class="container">
<header class="header">
<div class="tbl-row">
<div class="header-left">
<h1>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing</span><br/>
Excepteur sint occaecat cupidatat<br/>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
</h1>
</div>
<div class="header-spacer"></div>
<div class="header-right">
<p>Ut enim ad minim veniam, quis nostrud</p>
</div>
</div>
</header>
<div class="small-box"></div>
<!-- CENTER TABLE -->
<div class= "center-table">
<!-- CENTER ROW -->
<div class= "center-row">
<div class="vert-spacer"></div>
<!-- MAIN -->
<main>
<div class="main-body">
<div class="main-body-header">
<p><strong>WEBCAST</strong>TRANSMITTED LIVE ON</p>
<p>Sunday, 9 December 2018, 3:00 (EST) from New York, NY</p>
<div class="hr"></div>
<p><strong>Webcast:</strong><em>To View From Your Home or Office, Register at:</em></p>
<p>www.irure dolor in reprehenderit.com</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
<p class="foot-note">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
<p class="co-chairs"><span>Co-Chairs:</span> John Jones (Brazil), George Orwell (London, England)</p>
<table class="table">
<thead>
<tr class="header">
<th colspan="3">agenda</th>
</tr>
</thead>
<tbody>
<tr>
<td>09:00 – 09:05</td>
<td>Welcome and Introduction</td>
<td>Co-Chairs</td>
</tr>
<tr>
<td>09:05 – 09:30</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
<td>John Jones</td>
</tr>
<tr class="qa">
<td>09:30 – 09:35</td>
<td colspan="2">Q&A</td>
</tr>
<tr>
<td>09:35 – 10:00</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
<td>George Orwell</td>
</tr>
<tr class="qa">
<td>10:00 – 10:05</td>
<td colspan="2">Q&A</td>
</tr>
<tr>
<td>10:05 – 10:30</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
<td>Who Cares</td>
</tr>
<tr class="qa">
<td>10:30 – 10:35</td>
<td colspan="2">Q&A</td>
</tr>
<tr class="break">
<td>10:35 – 11:05</td>
<td colspan="2">Break</td>
</tr>
<tr>
<td>11:05 – 11:30</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
<td>Sam Man</td>
</tr>
<tr class="qa">
<td>11:30 – 11:35</td>
<td colspan="2">Q&A</td>
</tr>
<tr>
<td>11:35 – 12:35</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
<td>Faculty</td>
</tr>
<tr>
<td>12:35 – 12:45</td>
<td>Closing Remarks</td>
<td>Co-Chairs</td>
</tr>
</tbody>
</table>
<!-- /table -->
</div>
<!-- /main-body -->
</main>
<!-- /MAIN -->
<!-- ASIDE -->
<aside>
<div class="main-body">
<p class="list-header">Co-Chairs</p>
<ul class="faculty-list">
<li>
<span>John Jacob</span><br/>
Expert in Stuff<br/>
Lorum ipsum Division<br/>
Department of Lorem Ipsum<br/>
200 Car Talk Tower, Dewey Cheatum & Howe<br/>
Cambridge, MA
</li>
<li>
<span>John Jacob</span><br/>
Expert in Stuff<br/>
Lorum ipsum Division<br/>
Department of Lorem Ipsum<br/>
200 Car Talk Tower, Dewey Cheatum & Howe<br/>
Cambridge, MA
</li>
</ul>
<p class="list-header">faculty</p>
<ul class="faculty-list">
<li>
<span>John Jacob</span><br/>
Expert in Stuff<br/>
Lorum ipsum Division<br/>
Department of Lorem Ipsum<br/>
200 Car Talk Tower, Dewey Cheatum & Howe<br/>
Cambridge, MA
</li>
<li>
<span>John Jacob</span><br/>
Expert in Stuff<br/>
Lorum ipsum Division<br/>
Department of Lorem Ipsum<br/>
200 Car Talk Tower, Dewey Cheatum & Howe<br/>
Cambridge, MA
</li>
<li>
<span>John Jacob</span><br/>
Expert in Stuff<br/>
Lorum ipsum Division<br/>
Department of Lorem Ipsum<br/>
200 Car Talk Tower, Dewey Cheatum & Howe<br/>
Cambridge, MA
</li>
<li>
<span>John Jacob</span><br/>
Expert in Stuff<br/>
Lorum ipsum Division<br/>
Department of Lorem Ipsum<br/>
200 Car Talk Tower, Dewey Cheatum & Howe<br/>
Cambridge, MA
</li>
</ul>
</div>
<!-- /main-body -->
</aside>
<!-- /ASIDE -->
</div>
<!-- /CENTER ROW -->
</div>
<!-- /CENTER TABLE -->
<!-- FOOTER -->
<footer>
<p>
Copyright © 2018 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt<br/>
XXX-999999-YY
</p>
<div class="logo">LOGO GOES HERE</div>
</footer>
<!-- /FOOTER-->
</div>
<!-- /container -->
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
html {
font-size: 16px;
}
html, body, p {
margin: 0;
padding: 0;
}
body {
font-family: "Arial Narrow", Helvetica, sans-serif;
color: black;
font-size: 16px;
font-size: 1rem;
}
p {
line-height: 1;
margin: 0;
padding: 0;
}
.container {
padding: 0;
max-width: 1239px;
margin: 0 auto;
margin-bottom: -137px;
width: fit-content;
}
header {
display: table;
vertical-align: top;
height: 200px;
z-index: 1004;
}
.header-left {
display: table-cell;
vertical-align: top;
width: 78%;
color: #fff;
background-color: #00948f;
box-shadow: 7px 15px 18px #aaa;
-webkit-box-shadow: 7px 15px 18px #aaa;
position: relative;
}
.header-left h1 {
font-size: 50px;
font-size: 3.125rem;
margin: 0;
letter-spacing: 2px;
background-color: #00948f;
width: 100%;
padding: 20px 85px 30px 138px;
line-height: 1.1;
margin: 0;
}
.header-left h1 span {
font-size: 30px;
font-size: 1.875rem;
line-height: 1;
display: inline-block;
margin-bottom: 20px;
}
.header-spacer {
display: table-cell;
width: 2%;
}
.header-right {
display: table-cell;
width: 21%;
background-color: #9fd2d0;
box-shadow: 7px 15px 18px #aaa;
-webkit-box-shadow: 7px 15px 18px #aaa;
z-index: 1002;
padding: 175px 61px 0 20px;
line-height: 1.3;
font-size: 28px;
font-size: 1.75rem;
}
.small-box {
width: 8%;
height: 33px;
background-color: #9fd2d0;
z-index: 1005;
padding: 0;
}
.center-table {
display: table;
width: 100%;
margin-top: 10px;
}
.center-row {
display: table-row;
}
.vert-spacer {
display: table-cell;
background-color: #e6e7e8;
z-index: -2;
width: 8%;
}
main {
display: table-cell;
width: 69%;
}
.main-body {
margin-left: 20px;
height: 100%;
}
.main-body p:first-child {
font-size: 44px;
font-size: 2.75rem;
}
.main-body p:nth-child(2) {
font-size: 27px;
font-size: 1.6875rem;
}
.main-body .hr {
border-top: 10px solid white;
margin: 20px 0;
}
.main-body p:nth-child(3) {
font-size: 27px;
font-size: 1.6875px;
}
.main-body-header {
background-color: #9fd2d0;
padding: 10px 25px 15px;
margin-bottom: 20px;
}
.main-body-header p:first-child {
font-size: 44px;
font-size: 2.75rem;
margin-bottom: 10px;
}
.main-body-header p:nth-child(2) {
font-size: 27px;
font-size: 1.6875rem;
}
.main-body-header hr {
border-width: 10px;
}
.main-body-header p:nth-child(4) {
font-size: 30px;
font-size: 1.875rem;
text-align: center;
margin-bottom: 5px;
}
.main-body-header p:nth-child(5) {
font-size: 24px;
font-size: 1.5rem;
text-align: center;
margin-bottom: 10px;
}
.main-body-header p:nth-child(6) {
font-size: 24px;
font-size: 1.5rem;
}
.foot-note {
font-size: 20px !important;
font-size: 1.25rem !important;
margin-bottom: 1.25rem;
}
.co-chairs {
font-size: 22px !important;
font-size: 1.375rem !important;
margin-bottom: 20px;
}
.co-chairs span {
color: #00837c;
}
table {
font-size: 23px;
font-size: 1.4375rem;
border-collapse: collapse;
}
table th {
text-align: left;
padding-left: 20px;
}
table tr td {
padding: 5px;
}
table tr td:first-child {
width: 20%;
}
table tr td:nth-child(2) {
width: 55%;
}
table tr td:nth-child(3) {
width: 25%;
text-align: right;
padding-right: 20px;
}
table tr.header {
text-transform: uppercase;
font-size: 28px;
font-size: 1.75rem;
background-color: #00948f;
color: white;
}
table tr.header th {
border-top: 5px solid black;
}
table tr:not(agenda) td {
border-bottom: 3px solid #00948f;
}
table tr.qa {
background-color: #e5f4f4;
}
table tr.break {
background-color: #cdeae9;
}
aside {
padding: 0 20px;
display: table-cell;
width: 21%;
text-align: top;
}
aside .list-header {
text-transform: uppercase;
color: #004a99;
font-size: 28px !important;
font-size: 1.75rem !important;
margin-bottom: 10px;
}
aside .faculty-list {
list-style: none;
padding: 0;
font-size: 18px;
font-size: 1.125rem;
color: #a0a0a0;
}
aside .faculty-list li {
margin-bottom: 15px;
}
aside .faculty-list li span {
display: inline-block;
color: black;
font-size: 23px;
font-size: 1.277777778rem;
}
footer {
position: absolute;
left: 0;
right: 0;
bottom: 137px;
z-index: 10000;
position: relative;
min-width: 420px;
background-color: #00948f;
width: 100%;
height: 402px;
z-index: -2;
}
footer p {
position: absolute;
left: 20px;
bottom: 30px;
font-size: 19px;
font-size: 1.1857rem;
line-height: 1.3;
}
footer .logo {
position: absolute;
right: 60px;
bottom: 30px;
width: 90px;
height: 90px;
background-color: #9fd2d0;
display: inline-block;
}
@media screen and (max-width: 767px) {
.header-left,
.header-right {
display: block;
width: auto;
}
.header-left {
margin: 0 20px;
}
.header-left h1 {
font-size: 40px !important;
font-size: 2.5rem !important;
padding: 20px !important;
}
.header-left h1 span {
font-size: 15px !important;
font-size: 0.9375rem !important;
}
.header-right {
padding: 20px !important;
margin: 30px 20px 0;
}
.small-box {
display: none;
}
.vert-spacer {
display: none;
}
main, aside {
display: block;
width: auto;
}
.main-body {
margin: 20px;
}
.main-body-header p:first-child {
text-align: center;
font-size: 40px;
font-size: 2.5rem;
}
}
@media screen and (max-width: 1120px) {
footer p {
bottom: 100px;
}
footer .logo {
right: auto;
left: 20px;
bottom: 5px;
}
}
html css responsive-design responsive meta-tags
html css responsive-design responsive meta-tags
edited Nov 9 at 16:28
Adriani6
4,04421023
asked Nov 9 at 16:15
Peter Mingione
236
edited Nov 9 at 16:28
Adriani6
4,04421023
asked Nov 9 at 16:15
Peter Mingione
236
edited Nov 9 at 16:28
Adriani6
4,04421023
edited Nov 9 at 16:28
Adriani6
4,04421023
edited Nov 9 at 16:28
Adriani6
4,04421023
4,04421023
asked Nov 9 at 16:15
Peter Mingione
236
asked Nov 9 at 16:15
Peter Mingione
236
asked Nov 9 at 16:15
Peter Mingione
236
236
what browser / device are you testing?
– madeyejm
Nov 9 at 16:27
iPhone 6 Plus using the latest safari browser
– Peter Mingione
Nov 9 at 16:53
add a comment |
what browser / device are you testing?
– madeyejm
Nov 9 at 16:27
iPhone 6 Plus using the latest safari browser
– Peter Mingione
Nov 9 at 16:53
what browser / device are you testing?
– madeyejm
Nov 9 at 16:27
what browser / device are you testing?
– madeyejm
Nov 9 at 16:27
iPhone 6 Plus using the latest safari browser
– Peter Mingione
Nov 9 at 16:53
iPhone 6 Plus using the latest safari browser
– Peter Mingione
Nov 9 at 16:53
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
Maybe you should try to make it maximum scale to 0. However, it will disable the zoom feature. you cannot pinch out to zoom.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
answered Nov 9 at 16:33
Santosh
85811032
Good idea but it didn't work. Not only is it still zoomed in initially, but t also did not disable the zoom feature. I am not sure why.
– Peter Mingione
Nov 9 at 16:58
did you try putting a minimum-scale=1?
– madeyejm
Nov 9 at 17:44
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
Maybe you should try to make it maximum scale to 0. However, it will disable the zoom feature. you cannot pinch out to zoom.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
answered Nov 9 at 16:33
Santosh
85811032
Good idea but it didn't work. Not only is it still zoomed in initially, but t also did not disable the zoom feature. I am not sure why.
– Peter Mingione
Nov 9 at 16:58
did you try putting a minimum-scale=1?
– madeyejm
Nov 9 at 17:44
add a comment |
up vote
0
down vote
Maybe you should try to make it maximum scale to 0. However, it will disable the zoom feature. you cannot pinch out to zoom.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
answered Nov 9 at 16:33
Santosh
85811032
Good idea but it didn't work. Not only is it still zoomed in initially, but t also did not disable the zoom feature. I am not sure why.
– Peter Mingione
Nov 9 at 16:58
did you try putting a minimum-scale=1?
– madeyejm
Nov 9 at 17:44
add a comment |
up vote
0
down vote
up vote
0
down vote
Maybe you should try to make it maximum scale to 0. However, it will disable the zoom feature. you cannot pinch out to zoom.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
answered Nov 9 at 16:33
Santosh
85811032
Maybe you should try to make it maximum scale to 0. However, it will disable the zoom feature. you cannot pinch out to zoom.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
answered Nov 9 at 16:33
Santosh
85811032
answered Nov 9 at 16:33
Santosh
85811032
answered Nov 9 at 16:33
Santosh
85811032
answered Nov 9 at 16:33
Santosh
85811032
85811032
Good idea but it didn't work. Not only is it still zoomed in initially, but t also did not disable the zoom feature. I am not sure why.
– Peter Mingione
Nov 9 at 16:58
did you try putting a minimum-scale=1?
– madeyejm
Nov 9 at 17:44
add a comment |
Good idea but it didn't work. Not only is it still zoomed in initially, but t also did not disable the zoom feature. I am not sure why.
– Peter Mingione
Nov 9 at 16:58
did you try putting a minimum-scale=1?
– madeyejm
Nov 9 at 17:44
Good idea but it didn't work. Not only is it still zoomed in initially, but t also did not disable the zoom feature. I am not sure why.
– Peter Mingione
Nov 9 at 16:58
Good idea but it didn't work. Not only is it still zoomed in initially, but t also did not disable the zoom feature. I am not sure why.
– Peter Mingione
Nov 9 at 16:58
did you try putting a minimum-scale=1?
– madeyejm
Nov 9 at 17:44
did you try putting a minimum-scale=1?
– madeyejm
Nov 9 at 17:44
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53229442%2fwhy-is-the-viewport-met-tag-not-working-as-expected%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
what browser / device are you testing?
– madeyejm
Nov 9 at 16:27
iPhone 6 Plus using the latest safari browser
– Peter Mingione
Nov 9 at 16:53