CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
MarkP
MarkP

Reputation: 2566

Responsive Design Issue

I'm having some trouble with a responsive design. The first that I have tried to create.

For some reason when I view the site on my iphone everything is zoomed in.

What I want is; On the desktop site, the logo will sit left in the '.container' and when viewed on an iPhone the image will sit directly in the middle.

Here is the URL: http://markpetherbridge.co.uk/peak.

I have added this into the html header: 

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

this is the relevant CSS:

<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 !-->

My desktop CSS is: 

/* 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;

}

and the CSS for the phone is: @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;

}

}

It seems to work in the browser just not when viewed on an actual phone device.

Upvotes: 0

Views: 156

Answers (1)

Matt
Matt

Reputation: 2560

This will work when @media screen takes effect. http://jsfiddle.net/Enxu2/1/

You have a few issues because of your minimum width being set to specific pixels. For a mobile atmosphere you need to use a % so it can adapt to the viewport. Once you set something to width: 100% you need to be conscious of your left/right margins and padding as it can move elements outside of where they should be and allow the user to zoom in and out on your page instead of it fitting perfectly. An easy way to fix this if you are having some elements outside of your defined borders you can try changing some width:100% to width: 95% or even 90%. This should allow you to see which elements are causing the problem.

In the jsfiddle provided I changed some widths and some margins. I hope this will help you get on the right track!

#peak-logo {
display: block;
margin: 0 auto;
text-align: center;
position: relative;
width: 100%;
min-width: 100%; 
}

.wrapper {
width: 100%;
}
.container {
width: 100%;
}
.container img {
width: 100%
}

You also need to make sure your image will be responsive, so you need to set it to a % width also. if you have a max width/height for the image you can always define it in the css using max-width: or max-height: but keep in mind your viewports.

I hope this helps!

Upvotes: 1

Related Questions