I am working on a media query example in my boot camp. My media query does not seem to function on my page. Can anyone tell me why? I have reviewed it with my classmates, and after thirty minutes of review we have not been able to find the answer after looking at examples online. Any help would be greatly appreciated.
body {
background-color: lightblue;
text-align: center;
list-style-position: inside;
}
.banana {
height: 300px;
width: 300px;
}
.thick-white-border {
border-color: white;
border-width: 15px;
border-style: double;
}
.smaller-image {
width: 300px;
height: 600px;
border-radius: 55px;
}
.green-background {
background-color: green;
}
h1 {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
h2 {
font-family: fantasy;
}
ul {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
#media screen and (min-width: 0px) and (max-width: 400px) {
ul { color: green; } /* show it on small screens */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/index.css">
<title>About Me 02</title>
</head>
<body>
<H1 class="font-family">I am Lashonda Miller</H1>
<img src="./bananaGirl.jpg" alt="This is my selfie" class="thick-white-border smaller-image ">
<H2 class="font-family">This is me, inside of a banana.</H2>
<ul class="font-family">
<li>I am 17 years old, and I've just graduated high school</li>
<li>I'm also a certified Medical Assistent and an EKG Technician</li>
<li>I've been to LA before, it's a cool city, very slow traffic</li>
<li>My favorit food to eat it crab legs</li>
<li>I love scary movies</li>
<li>I also think everyone should go to Cedar Point</li>
<li>I also like pumpkin seeds</li>
</ul>
<a href="https://www.linkedin.com/in/lashonda-miller-91723b1b1?lipi=urn%3Ali%3Apage%3Ad_flagship3_profile_view_base_contact_details%3B37AWsTN%2BQJ%2BVJr7bGFE%2F2A%3D%3D" target="_blank" alt="This is my linkedin profile">Come check my linkedin account
</a>
</body>
</html>
So it looks like your media query was set up for small devices, you could try increasing the max-width to 800px or more #media screen and (min-width: 0px) and (max-width: 800px) { ul { color: green; } }
Related
I have the following HTML code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="background-image:url('images/background-website-web-blue.jpg');background-size: 100% 100%;background-attachment:fixed;">
<div class="content1" style="background-color: rgb(52,129,162,0.8); box-shadow: 10px 10px 10px rgba(0,0,0,0.8);" >
<div class="container" style="text-align:center;">
<div class="jumbotron" style="background-color: transparent;"></div>
<p style="color: white ; font-family: 'Roboto Slab',Helvetica, sans-serif; font-size: 40px; font-weight: 700;" >dockdockdock</p>
<p style="color: white ; font-family: 'Roboto Slab',Helvetica, sans-serif; font-size: 25px; font-weight: 400; font-style: italic;">dockdcokdock</p>
<p style="color: white ; font-family: 'Roboto Slab',Helvetica, sans-serif; font-size: 40px; font-weight: 400; line-height: 52px;" >DUck duck duck duck <i style="color: red; font-weight: 700;">60 Hari</i> Bergabung Di Ecourse Ini</p>
<br><br><br>
</div>
</div>
</div>
</body>
</html>
and CSS:
#media only screen and (max-width: 600px) {
p{
font-size:5px;
}
}
But why don't the <p> tags change into size 5px when media 600px or smaller?
And if I put the <p> tags above <div> it's working
Because the specificity of inline style is ranked much higher then just CSS
If you want your css for mobile to work with given HTML you need to add !important like
#media only screen and (max-width: 600px) {
p {
font-size: 5px !important;
}
}
Then it will work.
But to be honest, we should never use !important. That can be achieved easily in this case just move all your inline styles from HTML to the top of the CSS file
Working example with !important https://jsfiddle.net/nvzupxb0/
Working example with CSS only https://jsfiddle.net/nvzupxb0/2/
Notes on the CSS only solution
had to add some classes on <p> tags because your markup didn't allow me to use :nth-child() pseudo selectors
removed the <br> tags from the last (.third) p tag because line brakes can be achieved with CSS padding-bottom. giving the advantage of changing the padding-height via CSS for mobile devices!
Just move you inline css which is given in p tag to external css file or you can write !important like this -
#media only screen and (max-width: 600px) {
p{
font-size:5px !important;
}
}
you can create a media query and make the paragraph with 5px !important.
#media (max-width: 600px) {
p{
font-size: 5px !important;
}
}
I have below for my code. It is posting it on my entire webpage instead of just on that image and I can't quite figure out why.
dt {
font: Arial, Helvectica, sans-serif;
size: .9em;
weight: bold;
color: (dark red (#6b1101);
line-height: 2em;
}
dd {
font: Arial, Helvectica, sans-serif;
size: .9em;
weight: bold;
color: (dark red (#6b1101);
line-height: 2em;
}
#Wrapper {
width: 700px;
text-align: left;
margin: auto;
background-color: #F7EED7;
}
#imgtop {
width: 700px;
}
#leftnav {
background-color: #F7EED7;
padding: 10px;
float: left;
width: 150px;
}
#leftnav a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
color: #000033;
text-decoration: none;
text-indent: 0px;
display: block;
}
#leftnav a:visited {
font-family: Arial, Helvetica, sans=serif;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
color: #660066;
text-decoration: none;
text-indent: 0px;
display: block;
}
#leftnav a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
color: #000033;
text-decoration: none;
text-indent: 0px;
display: block;
background-color: #CCCCCC;
}
body {
background-color: #FFFFFF;
}
#maintext {
background-color: #F7EED7;
float: right;
width: 500px;
padding: 10px;
}
h1 {
color: red
}
<!doctype html>
<head>
<title>Cafe Townsend: Wine Tasting Terms </title>
<link type="text/css" rel="stylesheet" href="cafe.css">
<meta charset="utf-8">
</head>
<div id="leftnav">
<p>Home</p>
<p>Menu</p>
<p>Location</p>
<p>Restaurant Infomation</p>
<p>Restaurant Review</p>
<p>Special Events</p>
<p>DVD</p>
<p>
<a href="wine-list.html">
<img src="../images/wine_header.jpg" alt="Wine Ad" width="150" height="100" border="0" /></a>
</p>
</div>
<p>Greeting: "Hello, World!"</p>
<h1>Knowing your wines</h1>
<dl>
<dt>Acid, acidity</dt>
<dd>The tart (or in excess, sour) quality that wine's natural acidity imparts and that gives the wine a sense of body and structure. Required for proper balance; too much or too little constitutes a flaw.</dd>
<dt>Almond</dt>
<dd>A light bitter, nutlike quality sometimes noted in Italian white wines.</dd>
<dt>Anise</dt>
<dd>Faint licorice, a pleasant element in some Spanish reds; may indicate, however, that the wine has been artificially acidified, a practice that may improve short-term enjoyment but tends to make wines that cellar poorly.</dd>
<dt>Attack</dt>
<dd>A technical term for the first impression the wine makes as it reaches your palate, distinguished (in time sequence) from "middle" or ""mid-palate"" and "finish" or "aftertaste."</dd>
<dt>Bouquet, bottle bouquet</dt>
<dd>As a technical term, the smells that develop with age in the wine bottle, as opposed to "aroma," the smells associated with the fruit. I have little use for distinctions this narrow and try to avoid using them in my wine notes.</dd>
<dt>Earthy</dt>
</dd>Generic term for a range of aromas and flavors associated with organic qualities like "barnyard," "forest floor," "merde," and "tree bark." May be associated with brettanomyces (see above) but can also result
from oak aging or the nature of specific grapes. Mourvedre, for instance, imparts a characteristic earthy aroma. Again, not necessarily a fault, but "earthy" wines tend to be controversial, and a little bit is usually enough.</dd>
</dl>
</body>
</html>
So for some reason my html is not getting the dt and dd and changing the colors from normal to red. I dont get it, it goes to file (it should) but is doing nothing. have tried checking file names, making sure the paths are correct (they are). They are in the same exact folder.
Take out the weight: bold; This is breaking the CSS below. It should be font-weight:bold.
font-dd {font: Arial, Helvectica, sans-serif;
size: .9em;
font-weight: bold;
color:red;
line-height: 2em; }
It is because you are trying to use a value that is not a valid color (dark red (#6b1101) is not correct. Find the available value types here https://www.w3schools.com/cssref/pr_text_color.asp
body {
margin:0;
padding:0;
box-sizing:border-box;
}
.about-title {
background-color: #fc0321;
color:#ffffff;
padding: 5px;
font-family: 'PT Sans Narrow', sans-serif;
font-weight: 400;
text-align: center;
border-radius: 100px;
}
#media only screen and (max-width:400px) {
.about {
width:100%;
}
}
<div class="about">
<h3 class="about-title">Welcome to Mahasakthi Harvester Spares</h3>
<p style="font-weight: 200;">MAHASAKTHI HARVESTER SPARES, established in the year 2017 by high end professionals in the field of Combine Harvester Manufacturing and Repairing. We are leading wholesaler, retailer and manufacturer of combine harvester spares dealing in Standard,Balkar,Kartar,Preet and Claas Combine Harvesters.Our Product ranges from Machined spares, Fabricated spares, sheet metal spares, Rubber spares,Shafts,Bearings,Belts, Oils ,Grease,Filters,Rubber Tracks,Rollers,Sprockets to all miniature spares.</p>
Read More...
</div>
In the above code I tried for the responsive design but i'm not getting it.
I mentioned width as 87% for the desktop screens and then I changed the width to 100% for the smaller screens.But the width is not changing.I'm having trouble with this.
<head>
<style>
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.about-title {
background-color: #fc0321;
color: #ffffff;
padding: 5px;
font-family: 'PT Sans Narrow', sans-serif;
font-weight: 400;
text-align: center;
border-radius: 100px;
}
//--------------
.about {
width: 87%
}
//--------------
#media only screen and (max-width:400px) {
.about {
width: 100%;
}
}
</style>
</head>
You didn't write the default width value in your code
Here is the example that #AFF did in a snippet. As you can see it is working. If you are still having issues, then there is likely some conflicting CSS that is overriding your CSS. Please try and reproduce the issue you are having in a snippet using the width:85% for desktop widths, so we can help with your specific issue.
If seeing this working example helps solve your issue, then please accept #AFF answer.
body {
margin:0;
padding:0;
box-sizing:border-box;
}
.about-title {
background-color: #fc0321;
color:#ffffff;
padding: 5px;
font-family: 'PT Sans Narrow', sans-serif;
font-weight: 400;
text-align: center;
border-radius: 100px;
}
.about {
width:85%;
}
#media only screen and (max-width:400px) {
.about {
width:100%;
}
}
<div class="about">
<h3 class="about-title">Welcome to Mahasakthi Harvester Spares</h3>
<p style="font-weight: 200;">MAHASAKTHI HARVESTER SPARES, established in the year 2017 by high end professionals in the field of Combine Harvester Manufacturing and Repairing. We are leading wholesaler, retailer and manufacturer of combine harvester spares dealing in Standard,Balkar,Kartar,Preet and Claas Combine Harvesters.Our Product ranges from Machined spares, Fabricated spares, sheet metal spares, Rubber spares,Shafts,Bearings,Belts, Oils ,Grease,Filters,Rubber Tracks,Rollers,Sprockets to all miniature spares.</p>
Read More...
</div>
Newbie to HTML here. Developed a web site in HTML and CSS which have now published. Seems to render fine on desktop and tablet (IPad) but not so on mobile. Have followed various suggestions particularly around viewport to resolve this without success. So now asking for help from those more knowledgeable.
UPDATE
The issue when displaying on mobile is that the navigation menu items are not listed.
The site can be viewed at http://speech4all.co.nz
I have listed the HTML for the index.html page and also the CSS below.
Thanks for your suggestions in advance
Index.html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--[if IE 6]><![endif]-->
<meta http-equiv="Content-Language" content="EN-GB"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="language" content="EN"/>
<title>Speech4All - Speech and Language Therapy</title>
<meta name="author" content="Speech4All"/>
<link rel="author" title="Speech4All"/>
<meta name="description" content="Speech and Language Therapy Services in Auckland"/>
<meta name="copyright" content="Copyright © 2016 Speech4All, All Rights Reserved"/>
<meta property="og:title" content="Speech4All - Speech and Language Therapy, Auckland"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="index.html"/>
<meta property="og:description" content="Speech and Language Therapy Services in Auckland"/>
<meta property="og:site_name" content="Speech4All"/>
<meta name="robots" content="index,follow,noodp,noydir"/>
<meta http-equiv="imagetoolbar" content="no"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge;chrome=1"/>
<link rel="canonical" href="index.html"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link rel="stylesheet" media="screen,projection" type="text/css" id="google-fonts-css" href="http://fonts.googleapis.com/css?family=Amaranth:400,700"/>
<link rel="stylesheet" media="screen,projection" type="text/css" href="http://cdn-static.airsquare.com/5.6.4/compiled/theme/css.cfm?name=balloon&grid_max_width=960"/>
<link rel="stylesheet" media="screen,projection" type="text/css" id="managed-css" href="asset/csss4a.css"/>
<script type="text/javascript" src="../ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="container_12">
<div class="grid_12">
<div class="branding" itemscope="itemscope" itemtype="http://schema.org/Organization">
<a href="index.html" itemprop="url">
<img background-color="#add8e6" width="300" height="200" itemprop="logo" src="blah.png" alt="Speech4All" />
</a>
</div>
<div>
info#speech4all.co.nz
</div>
<div class="main-navigation">
<ul>
<li class="selected">Home</li>
<li>Services</li>
<li>FAQs</li>
<li>Resources</li>
<li>Testimonials</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="content">
<div class="clear"></div>
<div class="container_12">
<div class="grid_4">
<h3>About me</h3>
<p>My name is Anony Mouse and I am the Speech and Language Therapist for Speech4All in the Central Auckland Area. </p>
<p>I specialise in working with children, adolescents and adults with speech and/or language delays and disorders.</p>
<p style="text-align: center;">
<img alt="" height="386" src="./images/Blah.jpg" width="640" />
</p>
</div>
<div class="grid_4">
<h3>Qualifications</h3>
<ul>
<li>Master of Science with First Class Honours in Speech Language Sciences</li>
</ul>
<h3> </h3>
</div>
<div class="grid_4">
<h3>Why choose me?</h3>
<p>I pride myself on providing individualised client based Speech Language Therapy. I am passionate about what I do to support the communication needs of others and believe that everyone is capable of making progress. </p>
</div>
<div class="grid_4">
<h3>What I offer</h3>
<h4>Speech and Language Therapy Services</h4>
<ul>
<li>FREE consultation including a 15 minute screening to determine if Speech Language Therapy is required and would be beneficial.</li>
</ul>
</div>
</div>
</div>
</body>
CSS
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
h1, h2, h3, h4 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
#header .branding h1 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
#header .main-navigation ul li a { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.ui-tooltip-main-navigation-sub-menu .ui-tooltip-content { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.button { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
body { background-color: #FFFFFF; }
#wrapper { box-shadow: 0px 0px 30px #283036; }
#content { background:#FFFFFF; }
#header { background:#add8e6; }
#header .branding h1 a { color:#FFFFFF; }
#header .main-navigation ul li a { color: #5A1C2E; text-decoration: none;}
#media only screen and (max-device-width: 480px)
{
td#main_box
{
-webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; -ms-text-size-adjust:100%;
}
}
#header .main-navigation ul li a:hover { color:#8F1728; }
.ui-tooltip-main-navigation-sub-menu .ui-tooltip-content ul li a { color:#283036; }
.ui-tooltip-main-navigation-sub-menu .ui-tooltip-content { background:#FFFFFF; }
.ui-tooltip-main-navigation-sub-menu .ui-tooltip-content ul li a:hover { background:#8F1728; }
.ui-tooltip-main-navigation-sub-menu .ui-tooltip-content ul li a:hover { color:#FFFFFF; }
body { color:#555555; }
.cart table th { color:#555555; }
h1, h2, h3, h4 { color:#333333; }
.product h1 a { color:#333333; }
a { color:#8F1728; }
a:hover { color:#283036; }
.twitter-panel-listing { background:#F3F3F3; }
.testimonial-panel-listing { background:#F3F3F3; }
.testimonial-listing { background:#F3F3F3; }
.button { background:#add8e6; }
.button { color:#000000; }
.button:hover { color:#000000; }
th { background: #8F1728; }
th { color: #FFFFFF; }
#footer { background:#E7E7E7; }
The site looks OK to me on mobile, except your navigation isn't displaying. If that's the issue, it's because of this CSS
#media only screen and (max-width: 767px) and (min-width: 0px)
.main-navigation li:not(.toggle) {
display: none;
}
I don't see a .toggle in your code, so I presume you just want to remove that CSS and your navigation will be visible.
I created a website last night that works in Chrome, Firefox, Safari and Opera, but it isn't working in Internet Explorer
I tried creating conditional styling and html5.shiv in the head tags. My code looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Flat Design</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
<link href="css/hover.css" rel="stylesheet" media="all">
<!--[if lt IE 9]>
<script src="dist/html5shiv.js" type="text/javascript"></script>
<script src="PIE.js" type="text/javascript"></script>
<style type="text/css">
.wrap {
width: 980px;
}
.logo {
float: left;
}
.main-nav {
float: right;
}
.main {
width: 40.425531914894%;
height: 900px;
margin: 0;
}
.secondary {
width: 36.170212765957%;
height: 900px;
margin-left: 15px;
}
.extra {
display: block;
width: 23.404255319149%;
height: 900px;
}
</style>
<![endif]-->
</head>
<body>
<div class="wrap">
<header class="main-header">
<a class="logo" href="#"><h2>My Experience in Web Development</h2> </a>
<nav class="main-nav">
<a link href="#" class="hover">Home</a>
<a link href="#" class="hover">About</a>
<a link href="#" class="hover">Clients</a>
<a link href="#" class="hover">News</a>
<a link href="#" class="hover">Contact</a>
</nav>
</header>
<div class="content">
<div class="main col">
<h3>My candid experience in trying to find a job as a Web Developer</h3>
<p>It hasn't been a dull moment ever since I decided to switch careers to web development.</p>
<p>I've taken up the arduous task of putting together a portfolio of several pieces of my best work. At the same time, I brushed up on my skillset by taking online courses at Team Treehouse and several YouTube tutorials, as well as utilized sites such as Stack Overflow, SitePoint, Six Revisions, etc.</p>
</div>
<div class="secondary col">
<h3>Hitting the pavement for a job in web development.</h3>
<p>In December of 2012, I decided to put my resume online to see what the job market was like in web development.</p>
<p>A month later,I landed an assignment at Web 4 Purpose as a jr. front end web developer.I handled all of the CSS,HTML,Javascript coding from wireframes done in Adobe Photoshop or drawn.<br></p>
</div>
<div class="extra col">
<h3>There's several web technologies.</h3>
<p>Here's a short list of the several web technologies out there:</p>
<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>Javascript</li>
<li>JQuery</li>
<li>Bootstrap </li>
<li>Foundation</li>
<li>Angular.js </li>
</ol>
<br>
</div>
</div>
<footer class="main-footer">
<img src="img/twitter.png" alt="Twitter" class="social-icon">
<img src="img/facebook.png" alt="Facebook" class="social-icon">
<img src="img/linkedin.png" alt="LinkedIn" class="social-icon">
<img src="img/youtube.png" alt="YouTube" class="social-icon">
<img src="img/googleplus.png" alt="Google Plus" class="social-icon">
<p>© 2014 michaellegemah.com</p>
</footer>
</div>
</body>
</html>
The CSS sheet is this:
* {
box-sizing: border-box;
}
body {
margin: 0;
padding-top: 25px;
background: #ECF0F1;
color: #FFF;
font: 1.3em/1.6 sans-serif;
}
.wrap {
margin: auto;
width: 90%;
}
.main-header {
background: #2C3E50;
text-align: center;
font-family: 'Lato', sans-serif;
font-weight: 900;
}
.logo,
.main-nav a {
display: inline-block;
color: #FFF;
text-decoration: none;
font-family: 'Lato', sans-serif;
font-weight: 900;
}
.main-nav a {
padding: 0 .75em;
border-right: 1px dotted;
color: #FFF;
font-size: .7em;
line-height: 1rem;
}
.main-nav a:hover {
text-decoration: underline;
}
.main-nav a:last-child {
border-right: none;
}
.content,
.main-header {
overflow: hidden;
}
.col {
height: auto;
}
.main {
background: #3498DB;
font-family: 'Lato', sans-serif;
}
h3 {
font-weight: 900;
}
li a, a {
text-decoration: none;
color: #FFF;
font-weight: 900;
}
.secondary {
background: #2ECC71;
font-family: 'Lato', sans-serif;
}
.extra {
display: none;
background: #C0392B;
font-family: 'Lato', sans-serif;
}
.main-footer {
background: #95A5A6;
font-family: 'Lato', sans-serif;
}
.social-icon {
width: 40px;
height: 40px;
margin: 0 5px;
border: none;
}
.main-header,
.main-footer,
.col {
margin-bottom: 15px;
padding: 2.15%;
border-radius: 5px;
}
/* ==========================================================================
Media Queries
========================================================================== */
/* Phones to Tablets */
#media only screen and (min-width: 481px) {
.col {
float: left;
}
.main {
width: 65.957446808511%;
height: 900px;
}
.secondary {
width: 31.914893617021%;
height: 900px;
}
.secondary,
.extra {
margin-left: 2.127659574468%;
}
}
/* Tablets to Desktop */
#media only screen and (min-width: 769px) {
.logo {
float: left;
}
.main-nav {
float: right;
}
.main {
width: 40.425531914894%;
height: 900px;
}
.secondary {
height: 900px;
}
.extra {
display: block;
width: 23.404255319149%;
height: 900px;
}
}
#media only screen and (min-width: 1024px) {
.wrap {
width: 980px;
}
}
Unfortunately, the result has been this: http://flatdesign.originexample.site90.com which looks fine in all browsers except IE
If anyone sees anything I might have overlooked, or if there's a better solution, please let me know thanks
Using the IE11 developer-tools emulator to mimick IE8, I'm seeing two main differences:
no rounded corners;
columns aren't floating side-by-side;
The border radius can't be fixed easily and doesn't really affect performance, so I hope you're okay with ignoring that.
The column floats are what's making it look really ugly, and thankfully that's easy to fix.
You're creating your columns with the following rule:
#media only screen and (min-width: 481px){
.col {
float: left;
}
}
The problem is the "only" keyword. That keyword is designed to prevent browsers that don't recognize media queries from applying that style. That includes IE8. It reads it as a media query for a media type named "only"; it doesn't recognize that type, so it doesn't apply the style. If you remove the keyword:
#media screen and (min-width: 481px){
.col {
float: left;
}
}
Then IE8 reads that as #media screen blah,blah,blah. It ignores the stuff it doesn't understand and applies the rule to all screens regardless of their width.
For IE8, that's probably okay, since nobody's using IE8 on a handheld device. And if their screen is too narrow, that's okay since it just means the floated elements will end up one after another, the way they are without the floats.
It's possible that the change will also affect some older handheld devices that don't recognize min-width type media queries, but again, floats are pretty flexible.
One more thing: even when I added in a float property to your columns, the third column wasn't fitting in a row with the others. Two possible culprits: either IE8 is automatically adding in padding or margins somewhere you're not expecting, or they are rounding lengths up to the next pixel and that's throwing off your addition. A little bit of playing around with those settings should get them all side-by-side. If you make your last column float right instead of left, you can get away with making the margins slightly smaller without ruining the rectangular lines of the design.