I'm struggling with implementing a responsive design for the first time.
When I check the site on my iPhone, everything appears to be zoomed in for some reason.
My goal is to have the logo aligned to the left within the '.container' when viewed on a desktop, and centered when viewed on an iPhone.
Here is the URL for reference: .
In the HTML header, I have included the following:
meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"
Below is the relevant CSS code:
<div class="wrapper">
<div class="container" id="header">
<div id="peak-logo">
<img src="img/peak-logo.png" alt="Peak Architects" />
</div>
</div>
</div><!-- end.Header !-->
The desktop CSS includes:
/* structure */
body {
font-family: "Calibri", Helvetica, Arial, Sans-Serif;
font-size: 16px;
color: #8d8c8c;
}
.wrapper {
float: left;
top: 0px;
left: 0px;
width: 100%;
background-color: #333;
}
.container {
position: relative;
width: 1000px;
height: 100px;
background-color: #ccc;
margin: 0 auto;
}
For mobile devices, the CSS is as follows: @media screen and (max-width: 480px) {
body {
}
.wrapper {
max-width: 480px;
}
.container {
width: 100%;
max-width: 480px;
}
#peak-logo {
display: block;
margin: 0 auto;
text-align: center;
position: relative;
width: 200px;
min-width: 480px;
margin: 20px 0;
}
}
While it works fine in the browser, there seems to be an issue when viewed on an actual phone device.