mert cihan mert cihan - 2 months ago 9
CSS Question

Responsive design, max-width not working

I have been working with html/css and I have an issue with html css. In mobile devices my html/css look like this:

http://i.imgur.com/EwD0zIJ.png

I have pointed the issue. Why this happens?

My HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Robert Padbury</title>
<meta name="description" content="Robert Padbury is an Australian American Designer.">
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">

<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">

</head>
<body>
<div id="portrait">
<img src="logo.png" width="31" height="40" alt="Robert Padbury"/>
</div>


<div id="box">
<h1>Robert Padbury</h1>
<p>G'day! I am a Freelance Australian American Designer based in San Francisco, California. I focus on Human Interface Design (UI/UX), Icon Design, Identity &amp; Branding, and Special Projects.</p>
<p>I have worked in various capacities for companies including <a href="http://www.apple.com/">Apple</a>, <a href="http://www.instagram.com/">Instagram</a>, <a href="http://www.facebook.com/">Facebook</a>, <a href="http://www.uber.com">Uber</a>, <a href="http://en.wikipedia.org/wiki/Stipple_(company)">Stipple</a>, <a href="http://www.doubletwist.com">DoubleTwist</a>, <a href="http://en.wikipedia.org/wiki/Tapulous">Tapulous</a>, <a href="http://www.cooliris.com">Cooliris</a>, and <a href="http://www.revision3.com">Revision3</a>. Way back in the day, I was a Production Intern for <a href="http://en.wikipedia.org/wiki/X-Play">X-Play</a>.</p>

<p>If you would like to work together, please feel free to send me an <a href="mailto:&#114;&#111;&#98;&#101;&#114;&#116;&#64;&#112;&#97;&#100;&#98;&#117;&#114;&#121;&#46;&#109;&#101;">email</a>.</p>

<h2>Projects</h2>
<ul class="social">
<li><a href="http://padbury.me/clock/">Clock Screen Saver for OS X</a></li>
<li><a href="https://www.kickstarter.com/projects/padbury/atelier-playing-cards">Atelier Playing Cards</a> &mdash; <a href="https://docs.google.com/forms/d/1p2MvVyAUzEZf6PWc8iZDT2Vsbskfaf4cAurJf_QbzmM/viewform?usp=send_form">Waiting List</a></li>
<li><a href="https://www.buyolympia.com/q/Item=rands-v3">Rands in Repose T-Shirt</a> &mdash; <a href="https://www.buyolympia.com/q/Item=rands-v3-special-gun-metal">Limited Edition</a></li>
<li><a href="http://www.snapchat.com/add/modelhousetv">Model House Ibiza on Snapchat</a></li>
</ul>

<h2>Social Media</h2>
<ul class="social">
<li><a href="https://workingnotworking.com/padbury">Working Not Working</a></li>
<li><a href="http://www.instagram.com/padbury">Instagram</a></li>
<li><a href="http://www.dribbble.com/padbury">Dribbble</a></li>
<li><a href="http://www.twitter.com/padbury">Twitter</a></li>
<li><a href="http://www.linkedin.com/in/padbury">LinkedIn</a></li>
<li><a href="http://www.imdb.com/name/nm1599346/?ref_=fn_al_nm_1">IMDB</a></li>
</ul>
<br />
<p>Photo by <a href="https://twitter.com/tristan">Tristan O&#8217;Tierney</a>.</p>
</div>
</body>
</html>


My CSS:

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1.6;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

/*
—————————————————————————————————————————————————————————————————————————————————
*/

html {
background:#000000;
background: url(back.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

#portrait {

}

body {
text-align: left;
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 10pt;
width: 380pt;
margin: 32pt;
letter-spacing: 0.3px;
color: rgba(255,255,255,0.8);
}

#imagebox {
text-align: left;
margin: 2pt;
transition: 0.5s all ease;

}

p {
padding-bottom: 1.2em;

}

h1 {
font-size: 20pt;
margin-top: 10pt;
margin-bottom: 3pt;
font-weight: 200;
}

h2 {
margin-top: 20pt;
font-weight: 500;
font-size: 12pt;
}

ul {
list-style-type:none;
}

a:link {
/* color: #00aaff;*/
text-decoration: none;
transition: 1s all ease;
color: rgba(255,255,255,0.6);
}

a:visited {
color: rgba(255,255,255,0.6);
transition: 2s all ease;
}

a:hover {
color: #00aaff;
transition: 0.2s all ease;
}

/*
—————————————————————————————————————————————————————————————————————————————————
*/

/* iPad */
@media screen and (max-width: 640pt) {

html {
background: url(back.jpg) no-repeat left center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

#portrait {
background: url(back.jpg) no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
background-size: 100%;
height: 260px;
padding-left:40px;
padding-top: 40px;
}


body {
width:100%;
margin: 0;
font-size: 12pt;
background-color: rgb(19,19,19);
height: 100%;
}

#imagebox {
transition: 0.5s all ease;
margin: 30pt 30pt 0pt 32pt;
}

#box {
margin: 0pt 30pt 30pt 30pt;
}


}



/* iPhone */
@media screen and (max-width: 320pt) {
body {
width:100%;
margin: 0;
font-size: 10pt;
}

#portrait {
height:150px;
}

#imagebox {
text-align: center;
margin: 24pt;
}
/*
#box {
margin: 20pt;
}

h1 {
font-size: 13pt;
text-align: center;
padding-bottom: 50px;
font-weight: 200;
letter-spacing: 0.3em;
text-transform: uppercase;
}
*/

}


How can I fix this?
Thank you

Answer

In this media query @media screen and (max-width: 640pt) change this: width: 100% to this max-width: 100%;. I tested it on your site, and it work.