I am making my website compatible to internet explorer. How do I scale the website in internet explorer in the css hack?
Firstly I coded the website for firefox. That is why I have used some css hacks for some browsers. Now that I wanted to start to scale the website in the different browsers I started with internet explorer. I used a media query for the css hack to identify the internet explorer, but to scale the website, i need another media query. I have already tried to just 'add' the media query to that one which identifies the internet explorer and then I have copied it with min-width of 600, 768 and 998 but it just worked with min-width: 600px and ignored the other media queries. So is there another way to scale (just!) the website in internet explorer or did I code it wrong? Also I have the same question with chrome, where I did not used a media query but I still does not work there too.
/*IE*/ #media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
img.Marat {max-width: 13%;margin-left: 62%;height: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}
table.table {margin-top:15%;width:150%;margin-left:-325%;}
.Abstand4 {margin-left:-130%;}
img.Bild4 {margin-left:-1100%;max-width: 80%;height: auto;}
img.Bild6 {margin-left:-410%;margin-top:8.5%;max-width: 58%;height: auto;}
}
/*Chrome*/ #supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) {
img.Marat {max-width: 50%;margin-left: -50%;height: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}
table.table {margin-top:15%;width:150%;margin-left:-20%;}
.Abstand4 {margin-left:-130%;}
img.Bild4 {margin-left:-1100%;max-width: 80%;height: auto;}
img.Bild6 {margin-left:-410%;margin-top:8.5%;max-width: 58%;height: auto;}
}
}
I want to scale the website in internet explorer/chrome, but I do not know how to do it regarding that I had to use css hacks to identify the websites.
Sorry for my bad English and thanks for trying to help me!
If you use several media queries with min-width, you should put the minimum value at the first and the maximum at the last like this:
<head>
<meta charset="utf-8" />
<title></title>
<style>
/* Set the background color of body to tan */
body {
background-color: tan;
}
#media screen and (min-width:600px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
body {
background-color: blue;
}
}
#media screen and (min-width:768px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
body {
background-color: olive;
}
}
#media screen and (min-width:998px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
body {
background-color: aqua;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
In this order the media queries work well on IE10+. If the order is wrong, the media queries below will not work.
In the Chrome browser, we should also follow this rule. You could refer the following code:
<head>
<meta charset="utf-8" />
<title></title>
<style>
/* Set the background color of body to tan */
body {
background-color: tan;
}
#supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee)) and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) {
#media screen and (min-width:600px) {
body {
background-color: blue;
}
}
#media screen and (min-width:768px) {
body {
background-color: olive;
}
}
#media screen and (min-width:998px) {
body {
background-color: aqua;
}
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
Related
This a homework assignment. I need to take the existing code for a website I already made, and make it compatible with mobile device viewing. They want me to do this by adding responsive design elements. Currently, the desktop website is a two-column format. For mobile display, the website is supposed to be converted into a single-column format. When I open my website my phone, the website is still displayed as a two-column layout.
I've checked everything with CSS and HTML validators. No errors were detected. I followed the book instructions step by step, and have to include everything they tell me to include, but for some reason, it is still not showing up correctly on mobile devices. (I also tested to see if the issue was and iPhone or android problem only. Both devices don't display the website properly).
The first sample of code is the code for the HTML to show I did use a meta tag in the head. And the second sample of code is my external CSS that has the media queries.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Fish Creek Animal Clinic </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="fishcreek.css">
</head>
<body>
<div id="wrapper">
<header>
<h1> Fish Creek Animal Clinic </h1>
</header>
<nav>
<ul>
<li> Home</li>
<li> Services</li>
<li> Ask The Vet</li>
<li> Contact</li>
</ul>
</nav>
<main>
<dl>
<dt>Full Service Facility</dt>
<dd>Doctors and staff are on duty 24 hours a day, 7 days a week.<dd>
<dt>Years of Experience</dt>
<dd>Fish Creek Veterinarians have provided quality, dependable care for your beloved animals since 1984.</dd>
<dt>Open Door Policy</dt>
<dd>Our professionals welcome owners to stay with their pets during any medical procedure.</dd>
</dl>
<div>
<a id="mobile" href="tel:800-555-5555">800-555-5555</a><br>
<span id="desktop">800-555-5555</span><br>
1242 Grassy Lane<br>
Fish Creek, WI 55534<br><br>
</div>
</main>
<footer>
Copyright © 2018 Fish Creek Animal Clinic. All Rights Reserved.<br>
jescobedo3#saddleback.edu
</footer>
</div>
</body>
</html>
#media only screen and (max-width: 1024px) {
body {margin: 0;
padding: 0;
background-color: white;
background-image: none;
}
#wrapper {
width: auto;
min-width: 0;
margin: 0;
}
h1 {
margin: 0;
font-size: 1.8em;
line-height: 200%;
}
nav {
float: none;
padding: 0;
width: auto;
}
nav li {display: inline-block;}
nav a {
padding: 1em;
font-size: 1.2em;
}
nav ul {
text-align: center;
padding: 0;
margin: 0;
}
main {
font-size: 90%;
margin: 0;
padding-left: 2em;
}
footer {margin: 0;}
}
#media only screen and (max-width: 768px) {
header {background-image: url(lilfish.gif)}
h1 {
font-size: 1.5em;
line-height: 120%;
}
nav a {
display: block;
padding: 0.2em;
font-size: 1em;
border-bottom: 1px solid #330000;
}
nav li {display: block;}
nav ul {text-align: left;}
main {padding-left: 1em;}
.category {text-shadow: none;}
#mobile {display: inline;}
#desktop {display: none;}
}
I think you can use media queries for different sizes and also according to devices orientation also.
<style>
/* For Device Size */
/* Extra small devices (phones, 600px and down) */
#media only screen and (max-width: 600px) {
/* Your CSS Code for this device size */
}
/* Small devices (portrait tablets and large phones, 600px and up) */
#media only screen and (min-width: 600px) {
/* Your CSS Code for this device size */
}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {
/* Your CSS Code for this device size */
}
/* Large devices (laptops/desktops, 992px and up) */
#media only screen and (min-width: 992px) {
/* Your CSS Code for this device size */
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
#media only screen and (min-width: 1200px) {
/* Your CSS Code for this device size */
}
/* For Device Orientation */
/* According to Mobile Orientation */
#media only screen and (orientation: landscape) {
/* Your CSS Code for this device orientation */
}
</style>
I am trying to make a simple code for desktop and mobile display.
<html>
<head>
<style>
#media (min-device-width: 770px) {
#containermobile {display:none;}
}
body {
background-color: #000000;
}
#media (max-device-width: 769px) {
#containerPC {display:none;}
}
body {
background-color: #ffffff;
}
</style>
</head>
<body>
<div id="containerPC">pc</div>
<div id="containermobile">mobile</div>
</body>
</html>
Yet the background color is not displaying. What am I doing wrong ?
You didn't put the body blocks inside the #media blocks, so the second one just overrides the first one, and you get white background.
Also, for the purpose of testing, you should probably avoid using #000000 (black) and #ffffff (white). The former will hide the text, and the latter is the default background color so you can't be sure whether your code worked.
The following is an example of what will work correctly:
#media (min-device-width: 770px) {
#containermobile {display:none;}
body {
background-color: #444444;
}
}
#media (max-device-width: 769px) {
#containerPC {display:none;}
body {
background-color: #cccccc;
}
}
I'm in the learning process of making my site responsive. I'm having this issue with Opera working with a specific div under #media query to "display-none". Works in all the newer browsers except Opera. Am I missing something?
CSS:
#media only screen and (max-width: 400px) {
body {
font-size: 75%;
}
#column2, #name {
display: none;
}
#-o-viewport {
width: device-width;
height: device-height;
max-zoom: 2;
min-zoom: 0.5;
}
}
Actual DIV I'm trying to hide in my HTML:
<div id="column2">
<h1 id="name">P U N K I E D E S I G N S</h1></div></div>
Viewport settings:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
Change your media query to this
#media only screen and (max-device-width: 400px) {
body {
font-size: 75%;
}
#column2, #name {
display: none;
}
}
It behaves in the same way on Opera Mini as on other browsers – so by using media queries and targeting the device capabilities it caters for all.
CSS3 Media Query support
http://caniuse.com/#feat=css-mediaqueries
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!
I have below script, it's doing fine in firefox and chrome. ie9 doesn't show the change of colors.
<style type="text/css">
body {
background-color: #FF77BB;
}
#media screen and (max-width: 960px) {
body {
background-color: #8A2BE2;
}
}
#media screen and (max-width: 768px) {
body {
background-color: #FF8C00;
}
}
#media screen and (max-width: 550px) {
body {
background-color: #7FFF00;
}
}
#media screen and (max-width: 320px) {
body {
background-color: #CC0011;
}
}
}
</style>
Works fine for me, just get rid of the extra } at the very end, the other browsers may not make it an issue but IE9 is very picky, if one thing is off it breaks the whole thing.