I'm trying to use/ mock media queries in IE8 using respond.js
I have the attached code all set-up to run under localhost in IIS (just a plain and simple static site). Everything works on Chrome, FF, Safari but not IE (I'm using version 8)
I'm new to front end development and I cannot seem to work out what it is I am doing wrong. Please can somebody take a look and give me any pointers?
Thank you for your time,
Barry.
HTML File;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Media Query Test</title>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
<div class="wrapper one">This box will turn to pink if the viewing area is less than 600px</div>
<div class="wrapper two">This box will turn to orange if the viewing area is greater than 900px</div>
<div class="wrapper three">This box will turn to blue if the viewing area is between 600px and 900px</div>
<div class="wrapper iphone">This box will only apply to devices with max-device-width: 480px (ie. iPhone)</div>
<p class="viewing-area">
<strong>Your current viewing area is:</strong>
<span class="lt600">less than 600px</span>
<span class="bt600-900">between 600 - 900px</span>
<span class="gt900">greater than 900px</span>
</p>
<script src="/js/respond.min.js"></script>
</body>
</html>
CSS File;
.wrapper {
border: solid 1px #666;
padding: 5px 10px;
margin: 40px;
}
.viewing-area span {
color: #666;
display: none;
}
/* max-width */
#media screen and (max-width: 600px) {
.one {
background: #F9C;
}
span.lt600 {
display: inline-block;
}
}
/* min-width */
#media screen and (min-width: 900px) {
.two {
background: #F90;
}
span.gt900 {
display: inline-block;
}
}
/* min-width & max-width */
#media screen and (min-width: 600px) and (max-width: 900px) {
.three {
background: #9CF;
}
span.bt600-900 {
display: inline-block;
}
}
/* max device width */
#media screen and (max-device-width: 480px) {
.iphone {
background: #ccc;
}
}
Link to respond.js I am using (local version of; https://github.com/scottjehl/Respond/blob/master/dest/respond.min.js)
<script src="/js/respond.min.js"></script>
Should have been
<script src="js/respond.min.js"></script>
Note I have removed the preceeding "/"
I am now "fist pumping" the air as I have media queries in IE 8.
Thanks for your time. I hope this helps!
Related
I created a website and I used 2 divs, 1 has all the code for the desktop layout and one has all the code for mobile, I did this and would like to keep it this way for future changes,
On both divs display is default and on the media queries I have it set as this:
/* DESKTOP AND MOBILE VEIWPORT TOGGLE */
#media screen and (max-width: 1024px) {
.desktop {
display: none;
}
#media screen and (max-width: 100vw) {
.mobile {
display: none;
}
}
}
HTML
<div class="desktop">
<p>desktop</p>
</div>
<--- MOBILE DIV --->
<div class="mobile">
<p>mobile</p>
</div>
Also, all of my code can be found here with the html
https://codesandbox.io/s/soph2?file=/css/index.css:244-451
Also sorry if this was a stupid question, I'm 13 and I've only been coding for a year now.
When I go to a mobile device, the desktop view does not show but neither does any of my mobile code, please help me, thank you very much!
Also, I just noticed when on the desktop mode, the mobile div shows up too for some reason under the footer.
Media queries never go in media queries. Each one is basically a separate bit of css for a specific screen. In addition, 100vw should never be used in media queries, since it will always match. Also, please try to properly format your code. Makes it much more readable
#media screen and (max-width: 400px) {
.mobile {
display: none;
}
}
#media screen and (max-width: 1024px) {
.desktop {
display: none;
}
}
Add this in the head section :
<meta name="viewport" content="width=device-width, initial-scale=1">
#media screen and (max-width: 1023px) {
.desktop {
display: none;
}
.mobile {
display: block;
}
}
#media screen and (min-width: 1024px) {
.mobile {
display: none;
}
.desktop {
display: block;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="desktop">
<p>desktop</p>
</div>
<div class="mobile">
<p>mobile</p>
</div>
</body>
</html>
I am trying to test some Ratio media queries:
For example:
#media screen and (min-aspect-ratio: 8/5) { ... }
See the full code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.mq {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
#media screen and (min-aspect-ratio: 8/5) {
.mq {
background-color: red;
}
}
</style>
</head>
<body>
<div class="mq">
Some text here. This DIV can be resized.
</div>
</body>
</html>
The problem with the code above is that it was supposed to go red only when ratio is 18/5 but it's always Red.
What is wrong with this code?
Your code is fine, the CSS says that you need a ratio of at least 8/5, if you drag the screen size around you should see it change when your window is much taller than it is wide.
If you want to have this effect for the div, not the window, then you'll need to handle that with javascript instead of a media query.
var $div = $('.mq');
$div.change(function() {
if ($div.width() / $div.height() < 1.6) {
$div.css('background-color', 'white')
} else {
$div.css('background-color', 'red')
}
});
I would normally be able to solve simple CSS problems with just some trial and error (or so I thought). But I've been trying this all day with no luck. At this point I am not sure what to do.
I am trying to center a picture at the top of my page. I am also using a template, and by default there is text there. I figured I could just replace the title text with an image and it would be fine. I was wrong.
To give a better idea of what I am doing, here is a picture of the github template. The part I am referring to is "Sample Title": https://gyazo.com/89d3c00988ce270845b0fe67b55ee5f3
The code for the header looks like this:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Sample Title by Somebody</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
</head>
<body>
<section class="page-header">
<h1 class="project-name">Sample Title</h1>
<h2 class="project-tagline"></h2>
View on GitHub
Download .zip
Download .tar.gz
</section>
The stylesheet for the Header portion looks like this (the project-name portions seemed to be related to the Sample Title part though):
.page-header {
color: #fff;
text-align: center;
background-color: #159957;
background-image: linear-gradient(120deg, #155799, #159957); }
#media screen and (min-width: 64em) {
.page-header {
padding: 5rem 6rem; } }
#media screen and (min-width: 42em) and (max-width: 64em) {
.page-header {
padding: 3rem 4rem; } }
#media screen and (max-width: 42em) {
.page-header {
padding: 2rem 1rem; } }
.project-name {
margin-top: 0;
margin-bottom: 0.1rem; }
#media screen and (min-width: 64em) {
.project-name {
font-size: 3.25rem; } }
#media screen and (min-width: 42em) and (max-width: 64em) {
.project-name {
font-size: 2.25rem; } }
#media screen and (max-width: 42em) {
.project-name {
font-size: 1.75rem; } }
.project-tagline {
margin-bottom: 2rem;
font-weight: normal;
opacity: 0.7; }
#media screen and (min-width: 64em) {
.project-tagline {
font-size: 1.25rem; } }
#media screen and (min-width: 42em) and (max-width: 64em) {
.project-tagline {
font-size: 1.15rem; } }
I have tried everything that I know of to try to center the picture (a small logo) where the Sample Title text was with no luck. I've tried doing margins with 50% and auto, absolute positions, and changing the float. I've tried editing the proeject-name stylesheet info, as well as giving the picture an ID and editing it that way. It always ends up in some odd position and I cannot get it to work. Any help would be greatly appriecated!
you should add your image to your source like this:
<h1 class="project-name">
<img src="http://c3154802.r2.cf0.rackcdn.com/ssplogo.jpg"/>
</h1>
no extra css are needed. it will center your image at the top of page.
PS
The src attribute should contain a valid URL. Since space characters are not allowed in URLs, you have to encode them.
This is not currect:
<img id="Statslogo" src="assets/Stats Logo2.png" width="640" height="200"/>
Currect Version:
<img id="Statslogo" src="assets/Stats%20Logo2.png" width="640" height="200"/>
I'm not sure this is only happens on the galaxy S4, but its what I'm using to test it.
I striped the code down to a bare minimum.
Changed the colors just to test the code. Regular css works, mobile version doesn't get triggered.
Thank you,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>test</title>
<style type="text/css">
#media only screen and (max-device-width : 480px) {
#aaa {
color:#ff7d00;
font-size: 100px;
text-align:left;
}
}
#aaa {
color: #9b9b9b;
font-size: 50px;
text-align:center;
}
</style>
</head>
<body>
<div id="aaa">test</div>
</body>
</html>
It's not working because you're adding the media-query before your actual CSS. Also, you can simply use #media (max-width: 480px) { //styles here for devices whose screen size is less than 480px } instead of #media only screen and (max-device-width: 480px) { //styles here } This should work perfectly:
<style type="text/css">
#aaa {
color: #9b9b9b;
font-size: 50px;
text-align:center;
}
#media (max-width: 480px) {
#aaa {
color:#ff7d00;
font-size: 100px;
text-align:left;
}
}
</style>
Here's a working demo. You can try reducing the width of the result's window and see the styles of the text changing when the window size is reduced beyond 480px.
I am trying out the responsive nav plugin (responsive-nav.com) with the basic Skeleton grid system, and for some reason without editing the js and general css for the responsive nav plugin, I am running into issues with the navigation when minimized to area where navicon appears. For some reason the links drop down automatically and the navicon does not appear. Does it have to do with the container? I tried without the container div and still ran into the issue See images for example:
Here is the HTML:
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Your Page Title Here :)</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="stylesheets/base.css">
<link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/layout.css">
<script src="js/responsive-nav.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
</head>
<body>
<!-- Primary Page Layout
================================================== -->
<div class="band-nav">
<div class="container">
<div class="sixteen columns">
<nav class="nav-collapse">
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Blog</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="band-content">
<div class="container">
<div class="sixteen columns">
<h1 class="remove-bottom" style="margin-top: 40px">Skeleton</h1>
<h5>Version 1.2</h5>
<hr />
</div>
<div class="one-third column">
<h3>About Skeleton?</h3>
<p>Skeleton is a small collection of well-organized CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. It's based on a responsive grid, but also provides very basic CSS for typography, buttons, forms and media queries. Go ahead, resize this super basic page to see the grid in action.</p>
</div>
</div>
</div>
<script>
var navigation = responsiveNav(".nav-collapse", {
animate: true, // Boolean: Use CSS3 transitions, true or false
transition: 250, // Integer: Speed of the transition, in milliseconds
label: "Menu", // String: Label for the navigation toggle
insert: "after", // String: Insert the toggle before or after the navigation
customToggle: "", // Selector: Specify the ID of a custom toggle
openPos: "relative", // String: Position of the opened nav, relative or static
jsClass: "js", // String: 'JS enabled' class which is added to <html> el
init: function(){}, // Function: Init callback
open: function(){}, // Function: Open callback
close: function(){} // Function: Close callback
});
</script>
<!-- End Document
================================================== -->
</body>
</html>
CSS:
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/
/* Table of Content
==================================================
#Site Styles
#Page Styles
#Media Queries
#Font-Face */
/* #Site Styles
================================================== */
/*! responsive-nav.js 1.0.25 by #viljamis */
.nav-collapse,
.nav-collapse * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.nav-collapse,
.nav-collapse ul {
list-style: none;
width: 100%;
float: left;
}
.nav-collapse li {
float: left;
width: 100%;
}
#media screen and (min-width: 40em) {
.nav-collapse li {
width: 25%;
*width: 24.9%; /* IE7 Hack */
_width: 19%; /* IE6 Hack */
}
}
.nav-collapse a {
color: #fff;
text-decoration: none;
width: 100%;
background: #000;
border-bottom: 1px solid white;
padding: 0.7em 1em;
float: left;
}
#media screen and (min-width: 40em) {
.nav-collapse a {
margin: 0;
padding: 1em;
float: left;
text-align: center;
border-bottom: 0;
border-right: 1px solid white;
}
}
.nav-collapse ul ul a {
background: #ececec;
padding-left: 2em;
}
#media screen and (min-width: 40em) {
.nav-collapse ul ul a {
display: none;
}
}
.nav-toggle {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 70px;
height: 55px;
float: right;
text-indent: -9999px;
overflow: hidden;
background: #f4421a url("hamburger.gif") no-repeat 50% 33%;
}
#media screen and (-webkit-min-device-pixel-ratio: 1.3), screen and (min--moz-device-pixel-ratio: 1.3), screen and (-o-min-device-pixel-ratio: 2 / 1), screen and (min-device-pixel-ratio: 1.3), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.nav-toggle {
background-image: url("hamburger-retina.gif");
-webkit-background-size: 100px 100px;
-moz-background-size: 100px 100px;
-o-background-size: 100px 100px;
background-size: 100px 100px;
}
}
/* #Page Styles
================================================== */
/* #Media Queries
================================================== */
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {}
/* #Font-Face
================================================== */
/* This is the proper syntax for an #font-face file
Just create a "fonts" folder at the root,
copy your FontName into code below and remove
comment brackets */
/* #font-face {
font-family: 'FontName';
src: url('../fonts/FontName.eot');
src: url('../fonts/FontName.eot?iefix') format('eot'),
url('../fonts/FontName.woff') format('woff'),
url('../fonts/FontName.ttf') format('truetype'),
url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
font-weight: normal;
font-style: normal; }
*/
i think you forgot to link to the jquery library. You are only linking to the jquery of the responsive nav, but you need the Main jquery library to work.
put this before the link to the responsive-nav.js:
I was getting the responsive nav error with this refference:
<script src='https://cdnjs.cloudflare.com/ajax/libs/responsive-nav.js/1.0.32/responsive-nav.min.js'></script>
So I had to download it and host it on my local resources:
<script src="/js/responsive-nav.min.js" type="text/javascript"></script>
Problem solved for me.