How to create an unnested IE11 media query? - html

I'm trying to support IE11 in my grid-site, and I have -ms-grid code in one media query. I want to activate -ms-grid only on screens larger than 767px.
This works:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active){
I will get -ms-grid code in IE11 with that, and only in IE11, but this doesn't work:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active), (min-width:767px){
It doesn't turn off when I resize the screen.. I have tried a few different variations on it, I'm quite a noob on media queries so I hope you can spot something thats off..

Now that I have tested everything, supporting grid/-ms-grid/no-grid, I see that the best way is this:
Create mobile friendly html5 site without grid
Support Internet Explorer 11 by doing this:
#media screen and (min-width: 767px){
*::-ms-backdrop,.example{
display: -ms-grid;
}
}
Support "display: grid;" enabled browsers with this:
#media only screen and (min-width: 767px){
#supports (display: grid){
.example{
display: grid;
}
}
}
Remember to make sure the code is in this order because Edge still reads the old grid code aswell.

Related

Media queries not working in specific IE query

I am trying to use media queries in only one browser (IE) but nothing I have tried is working.
For example:
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* Styles go here for IE */
#media screen and (max-width: 700px) {
.article {
width: 100%!important;
}
}
}
I am trying to have a media query that only works for IE and nothing else, but this isn't having any affect. I have also tried:
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none), (max-width: 1320px) {
div#desktop-nav {
padding-left: 0px!important;
padding-right: 0px!important;
}
}
I added the max-width to the end of the media query.
If anyone has any clue how to do media queries for one specific browser please let me know
It looks like you are trying to target IE 10+, so try using the all selector instead of the screen selector.
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS */
}
If you're trying to target IE 9 or below, you'll have to load a conditional stylesheet, like so:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
You can find more detail about this and other Microsoft browsers here:
how to detect IE and Edge browsers in CSS?
You have separated the conditions with commas and not the and keyword
#media screen and (-ms-high-contrast: active) and (-ms-high-contrast: none) and (max-width: 1320px) {
div#desktop-nav {
padding-left: 0px!important;
padding-right: 0px!important;
}
}

Media Queries are affecting the desktop version, but not the mobile version

I have a css media query but it seems to be mixed up and I'm not sure why. It's making the desktop version look like what I want the mobile version to be, and the mobile version looks like what I want the desktop to be. Here is the css page in question:
#media (min-width: 500px;) {
body{background-image:url(ollivanderbackground.jpg);color:#FFFF66;}
.navigation{color:#FFFF99; border:dotted medium #FFFF99; width: 35%;}
a:hover{color: #FFFFCC;}
a:visited{color: #FFFF1A;}
}
#media (max-width: 499px;) {
.navigation{width: 100%;}
.bio{display: none;}
}
in the HTML for the page I have this within the head tags:
<'meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0"'>
What exactly am I doing wrong?
Change:
#media (min-width: 500px;) { ... }
#media (max-width: 499px;) { ... }
To:
#media (min-width: 500px) { ... }
#media (max-width: 499px) { ... }
you can try use '#media screen'
#media screen and (min-width:200px) and (max-width:1000px)
Removing the semi-colon should have fixed the issue
#media (min-width: 500px) { ... }
#media (max-width: 499px) { ... }
Since that is not working, try adding screen
#media screen and (min-width: 500px) { ... }
#media screen and (max-width: 499px) { ... }
If that does not resolve your issue, then add a snippet with your question
I figured it out. It turns out My browser history was really clogged and was loading an older version of the site while trying to mix it with the new CSS and things got really mixed up and weird.
Clearing my browser data fixed this problem. Thanks to all for your helpful tries!
If I understand your question correctly, and I am going out on a limb here without seeing the rest of your code, your responsive layouts are being messed up possibly due to a bad or missing declaration of viewport.
Check, replace, or add this in your head. You currently have single quotes around it
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
Read more about it here
Also, build your application with a mobile-first approach
media max = 480 --> do this until
media max = 768 --> if changes required change or continue to
media max = 989 --> if changes required change or continue to
media max = 1200

Firefox mediaquery min-width

I'm making a website using HTML5 & CSS3. It needs to be responsive, so I'm making use of mediaqueries. I have set the following:
#media screen and (min-width: 1024px) {
#hamburger {
display: none;
}
#desktop-nav {
display: inline;
}
}
It works fine in all browsers, except firefox (latest version). It already executes on 800 & something.
Anyone any idea?
Thanks!

Is it possible to create a responsive web page using html5 only? (without css or javascript)

Let me know how to achieve this if it's possible to do so using HTML5 only.
I've done all of my responsive design using CSS with media queries. I'm currently working on a template displayed inside an editor and the customer wanted it to be mobile friendly. The problem is I can't include any css or javascript files inside that editor and so wonder if there's any possible way to achieve that
No you can't build responsive web page without using css
for responsive web page create css with
#media screen and (min-width: 737px) and (max-width: 1200px) {
/* write CSS element */
}
#media screen and (max-width: 736px) {
}
#media (min-width:768px){
}
for example write media specific css like
#media (min-width:768px){.para{font-size:21px}}
#media (min-width:992px){.container{width:970px}}
#media (min-width:1200px){.container{width:1170px}}
#media screen and (max-width:767px){
.table-responsive{width:100%;margin-bottom:10px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar;border:2px solid #ddd
}
programming tutorials

media seems to not calculate the screen size properly

I'm trying to make a responsive index for my website, for this, i'm using Firefox Responsive Design Mode. In 1920x900px, my #media is working perfectly. The problem is when i change to 1280x600px. He keeps getting the images positioning like i order in 1920x900px. I made some tests and other attributes for 1280x600px works ! Here's the comments in my code:
/* Para monitores 1280x600px */
#media screen and (max-height:600px){
#slider{
/* If i change this to display:none; it really disappear the tag,
which makes me guess the screen calc is doing ok.*/
height:73.5vh;
}
}
#media screen and (max-width:1280px){
#mainAtc{
margin-left:2vw;
}
#othAtc{
margin-left:0;
}
}
/* Para monitores 1920x900px */
#media screen and (max-height: 900px){
#slider{
/* But, if in 1280x600 i got display:none, and here i got display:block, he shows me the image. It's like it doesn't work just when i give same attributes to differente #media. */
height:51.6vh;
}
}
#media screen and (max-width: 1920px){
#mainAtc{
margin-left:2vw;
}
#othAtc{
margin-left:7.6vw;
}
#atcRest{
margin-left:2vw;
}
}
Someone could help me ? Thanks!