It's working now. I re-uploaded the styles.css again and then refreshed the page and css cache. It works now. 
this is the entire css file
Now, I'm off to work on changing all the images using the responsive grid system you showed me earlier this week.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<title>CSS3 Grid Images - Fluid Scale, Responsive</title>
<!-- http://www.dynamicdrive.com/forums/archive/index.php/t-77355.html -->
<style>
html, body { margin:0; padding:0; font:16px/1.75 Verdana, Arial, Helvetica, sans-serif; background:#ccc }
#header { position:relative; top:0; left:0; right:0; height:4.0625em; background:#222 }
.page-content { padding:1em; max-width:64em; margin:auto; background:#fff }
table { margin:1em 0 }
td { font-weight:bold }
td, input { text-align:center }
.right { text-align:right }
.left { text-align:left }
.clearfix:after { content:" "; display:table; clear:both }
.img-01 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - Truly Outrageous Jem.jpg') }
.img-02 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - Zazz & Roxy.JPG') }
.img-03 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - double vision.JPG') }
.img-04 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - Rio and Rio.jpg') }
.img-05 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - Now.JPG') }
.img-06 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - Roxy GGGRRRRR.jpg') }
.img-07 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - those pants - back.jpg') }
.img-08 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - those pants - front.jpg') }
.img-09 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - Minx Rio & Jem again.jpg') }
.img-10 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - Minx saunters.jpg') }
.img-11 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - One Pizzazz Too Many.jpg') }
.img-12 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - loves young dream.jpg') }
.img-13 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - down with the 80s.JPG') }
.img-14 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - he is mine Jem.jpg') }
.img-15 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - mini Misfits.jpg') }
.img-16 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - nasty Jetta & Roxy.jpg') }
.img-17 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - sexy Pizzazz!.jpg') }
.img-18 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - sexy Roxy.jpg') }
.img-19 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - Mr Jem Pants & Jetta.JPG') }
.img-20 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - Mr Jem Pants!.jpg') }
/* #### - reduce padding-bottom for rectangular images (75% = 4:3 aspect ratio, 56.25% = 16:9 aspect ratio) - #### */
.img { padding-bottom:100%; width:100%; background-position:center; background-repeat:no-repeat; background-size:cover }
.img:hover { opacity:0.5 }
/* #### - smallest width = 2 images per row - #### */
.grid-outer { margin:-3% } /* negative value of .grid margin */
.grid { float:left; margin:3%; width:44% } /* width = (100 / images per row) - ( margin x 2 ) */
@media ( min-width:20em ) { /* #### - > 320px = 3 images per row - #### */
.grid-outer { margin:-2% } /* negative value of .grid margin */
.grid { margin:2%; width:29.333% } /* width = (100 / images per row) - ( margin x 2 ) */
}
@media ( min-width:35em ) { /* #### - > 560px = 4 images per row - #### */
.grid-outer { margin:-1.5% } /* negative value of .grid margin */
.grid { margin:1.5%; width:22% } /* width = (100 / images per row) - ( margin x 2 ) */
}
@media ( min-width:50em ) { /* #### - > 800px = 5 images per row - #### */
.grid-outer { margin:-1% } /* negative value of .grid margin */
.grid { margin:1%; width:18% } /* width = (100 / images per row) - ( margin x 2 ) */
}
</style>
<!--[if lt IE 9]>
<style>
.grid-outer { margin:-1% }
.grid { width:125px; margin:1% }
.img { height:125px; padding-bottom:0 }
.clearfix { *zoom:1 }
</style>
<![endif]-->
</head>
<body>
<div id="header">
<a href="/"><img src="/template/images/logo-50x50.png" style="position:absolute; top:0.5em; left:1em; width:3em; height:3em; border:0" alt="Home" title="Home"/></a>
<span style="position:absolute; top:1.175em; left:5em; color:#fff">Focus on Function</span>
</div><!-- closing "#header" -->
<div class="page-content">
<h2>CSS3 Grid Images - Fluid Scale, Responsive</h2>
<p>The images in this demo fluidly scale down in size as the browser width decreases. They do not break out of their grid.</p>
<br/>
<div class="grid-outer clearfix">
<div class="grid">
<div class="img img-01"></div>
</div>
<div class="grid">
<div class="img img-02"></div>
</div>
<div class="grid">
<div class="img img-03"></div>
</div>
<div class="grid">
<div class="img img-04"></div>
</div>
<div class="grid">
<div class="img img-05"></div>
</div>
<div class="grid">
<div class="img img-06"></div>
</div>
<div class="grid">
<div class="img img-07"></div>
</div>
<div class="grid">
<div class="img img-08"></div>
</div>
<div class="grid">
<div class="img img-09"></div>
</div>
<div class="grid">
<div class="img img-10"></div>
</div>
<div class="grid">
<div class="img img-11"></div>
</div>
<div class="grid">
<div class="img img-12"></div>
</div>
<div class="grid">
<div class="img img-13"></div>
</div>
<div class="grid">
<div class="img img-14"></div>
</div>
<div class="grid">
<div class="img img-15"></div>
</div>
<div class="grid">
<div class="img img-16"></div>
</div>
<div class="grid">
<div class="img img-17"></div>
</div>
<div class="grid">
<div class="img img-18"></div>
</div>
<div class="grid">
<div class="img img-19"></div>
</div>
<div class="grid">
<div class="img img-20"></div>
</div>
</div>
<br/>
<h2>Compatibility</h2>
<ul>
<li>IE9+ *</li>
<li>Chrome</li>
<li>Safari</li>
<li>Firefox</li>
<li>Opera</li>
<li>Android</li>
<li>iOS</li>
</ul>
<p>* "background-size:cover;" isn't supported in IE7/8 so a fixed-size fallback is provided for those browsers.</p>
<div id="calc">
<h2>Grid Image Calculator</h2>
<p>This form calculates the required <b>width</b> CSS value of each image in a row, for this demo's fluid grid scaling.</p>
<p>Enter the desired number of images per row, the margin around images, then transfer the results to your CSS.</p>
<table>
<tr>
<td> </td>
<td>images per row</td>
<td>margin (%)</td>
</tr><tr>
<td class="right"> </td>
<td><input type="text" id="ipr" /></td>
<td><input type="text" id="mar" /></td>
</tr><tr>
<td> </td>
<td colspan="2"><input type="submit" onclick="Calculate();" value="CALCULATE"/></td>
</tr><tr>
<td class="right">width: </td>
<td><input type="text" id="wth" /></td>
<td class="left">% (per image)</td>
</tr>
</table>
</div>
</div><!-- closing ".page-content" -->
<script>
function roundNumber(number, digits) {
var multiple = Math.pow(10, digits);
var rndedNum = Math.round(number * multiple) / multiple;
return rndedNum;
}
function Calculate() {
var ipr = document.getElementById('ipr').value;
var mar = document.getElementById('mar').value;
var wth = (100 / ipr) - (mar * 2);
document.getElementById('wth').value = roundNumber(parseFloat(wth), 3);
localStorage.setItem('ipr', ipr.value);
localStorage.setItem('mar', mar.value);
}
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
/* })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); */
})(window,document,'script','//fofwebdesign.co.uk/template/scripts/ga.php','ga');
ga('create', 'UA-33863475-1', 'fofwebdesign.co.uk');
ga('send', 'pageview');
</script>
</body>
</html>
responsive 2 columns with youtube video problem
Reply With Quote
Bookmarks