<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Jack Yuan | Web Developer</title>
<link rel="stylesheet" href="CSS/normalizemore.css">
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="CSS/main.css">
<link rel="stylesheet" href="CSS/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Jack Yuan</h1>
<h2>Web Developer</h2>
</a>
<nav>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="index.html" class="selected">Portfolio</a></li>
<li><a href="item.html"> Items For Sale </a> <li>
<li><a href="contact.html">Contact</a></li>
<li><a href="more.html"> More </a> </li>
</ul>
</nav>
</header>
<section>
<ul id="gallery">
<li id="pic1">
<a href="PortImg/001.JPG">
<img src="PortImg/001.JPG" width="500" height="400" alt="">
<p> Columbia/Erbsville </p>
</a>
</li>
<li id="pic2">
<a href="PortImg/002.JPG">
<img src="PortImg/002.JPG"width="500" height="400" alt="">
<p> Columbia West </p>
</a>
</li>
<li id="pic4">
<a href="PortImg/004.JPG">
<img src="PortImg/004.JPG"width="500" height="400" alt="">
<p> Broadwalk </p>
</a>
</li>
<li id="pic5">
<a href="PortImg/005.JPG">
<img src="PortImg/005.JPG"width="500" height="400" alt="">
<p> Columbia Lake</p>
</a>
</li>
<li id="pic6">
<a href="PortImg/003.jpg">
<img src="PortImg/003.jpg"width="500" height="400" alt="">
<p> Conservation Area </p>
</a>
</li>
<li id="pic7">
<a href="PortImg/007.JPG">
<img src="PortImg/007.JPG"width="500" height="400" alt="">
<p> Erb</p>
</a>
</li>
</ul>
</section>
<footer>
<div id="mus">
<embed src="In Christ Alone.mp3" loop="true" autostart="true" height="55mm">
<p> In Christ Alone </p>
<p>Presented by <a href =https://www.youtube.com/watch?v=RzseOqwn8oo">Christina Grimmie</a></p>
</div>
<div id="logo">
<a href="https://www.facebook.com/jackyuan.jack">
<img src="img/facebook.gif" alt="FaceBook Logo" class="icon">
</a>
<a href="https://twitter.com/Jack19909100">
<img src="img/twitter.gif" alt="Twitter Logo" class="icon">
</a>
</div>
<p>Jack Yuan</p>
<p>All Rights Reserved.</p>
</footer>
</body>
</html>
CSS
a {
text-decoration:none;
}
#logo {
text-align: center;
margin: 0;
}
h1 {
margin: 0;
padding-top: 4mm;
font-size: 2em;
font-family: 'Lobster', cursive;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-family: 'Gloria Hallelujah', cursive;
font-size: 1.5em;
margin: -5px 0 0;
font-weight: normal;
}
body{
font-family: 'Gloria Hallelujah', cursive;
}
a {
color: #6ab47b;
}
header{
background: #6ab47b;
border-color:#599a68;
float:left;
margin: 0;
padding: 5px 0 0 0;
width: 100%;
}
nav{
background: #599a68;
text-align: center;
margin: 20px 0 0;
}
nav a, nav a:visited {
color:#fff;
}
nav ul{
list-style: none;
margin: 0 10px;
padding: 0;
}
nav a{
font-weight: 800;
padding: 15px 10px;
}
h1, h2{
color:#fff;
}
h3{
margin: 0 0 1em 0;
}
nav a.selected , nav a:hover {
color:#32673f;
}
footer{
font-size: 1em;
text-align: center;
clear:both;
padding-top: 20px;
color: #ccc;
line-height: 0.8em;
background: black;
padding-bottom: 1mm;
}
img{
max-width: 100%;
}
#gallery img{
width: 100%;
}
#gallery{
margin:0;
list-style: none; /** remove bullet point **/
}
#gallery li{
float:left;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#gallery li a p{
margin: 0;
padding: 0;
font-size: 1.5em;
color: #bdc3c7;
}
.icon{
width: 40px;
height: 40px;
margin: 5mm 5px;
}
body{
background: orange;
margin:0;
color:#999;
}
/******
Page about
******/
.profile-photo{
display:block;
max-width:600px;
margin:0 auto 30px;
border-radius: 100%;
padding-top: 10mm;
}
#confu{
margin-top: 70mm;
}
#context{
font-family: 'Montserrat', sans-serif; font-size: 1.5em;
}
#aboutsec{
font-family: 'Pacifico', cursive; font-size:1.5em;
text-align:center;
}
#mus p{
margin-top:0;
padding-top:0;
line-height: 0.8em;
}
#item_gallery{
margin:0;
list-style:none;
}
#item_gallery li{
display:inline-block;
padding-top: 22px;
padding-right: 26px;
padding-left: 26px;
width:120px;
vertical-align: top;
}
#item_gallery p,img{
margin:0;
padding: 0;
color: red;
}
#sec{
height:40cm;
}
@media screen and (min-width: 500px){ /** Consider as "if" statement **/
#gallery li{
width: 28.3333%;
}
#gallery li: nth-child(4n){
clear:left;
}
nav li{
display: inline-block;
}
#aboutp{
float:right;
}
#aboutimg{
width: 80%;
}
@media screen and (min-width: 660px){
nav{
background: none;
float: right;
font-size: 1.75em;
margin-right: 5%;
text-align: right;
width: 45%;
I used media query in my CSS file, and it works fine when I re-adjust the size of the browser window on my laptop. It does not work in my Iphone though? Just can't figure out why.
This is the the link to my code on fiddle: (including my html) http://jsfiddle.net/den330/pgH2b/
This is the address of my website so you may try it on your phone: jackyuan.org
I ran it through csslint.net and found a few issues. The FIDDLE.
Changed...
#gallery li: nth-child(4n){
to...
#gallery li:nth-child(4n){
Then made sure each of the breakpoints were closed properly.
@media screen and (min-width: 500px){ /** Consider as "if" statement **/
#gallery li{
width: 28.3333%;
}
#gallery li:nth-child(4n){
clear:left;
}
nav li{
display: inline-block;
}
#aboutp{
float:right;
}
#aboutimg{
width: 80%;
}
}
@media screen and (min-width: 660px){
nav{
background: none;
float: right;
font-size: 1.75em;
margin-right: 5%;
text-align: right;
width: 45%;
}
}
That should do it. Good luck!