Morning all
I've employed media query breakpoints in order for my site to be responsive as is required in the modern age. For some reason, one of my breakpoints has just disappeared in the HTML document despite my CSS covering all breakpoints up to
#media only screen and (min-width: 1200px)
I can also confirm that my CSS document is in the root folder, situated as follows:
<head>
<link href="../styles.css" rel="stylesheet" type="text/css">
</head>
I've no third-party plugins installed on DW, but I do have Google Translate and Font Awesome.
Not aware as to the media query version but is the version which came with the software.
I appreciate this is specifically a coding site, not a DW-orientated forum so if it is something to do with DW glitching out, please disregard this post. However, if you feel there is an error in my coding, let us know!
[enter image description here](https://i.stack.imgur.com/9OYjk.png)
Not specifically coding-oriented but tried reinstalling DW, reverting back to previous versions of the software in order to rule out any DW-related problems.
I have removed the Google Translate plugin as well as the Font Awesome plugin to see if this WAS interfering with Media Query.
Related
Hi guys I have a problem with some sites from my university and at my localhost. We started with web developement and learned html and css. The thing is I found a very weird CSS Tag in my Head with very weird and scammy looking refs. I looked at some of the links and maybe it sounds weird but some links are P*rn sites or some tracker sites as it seems from the names. I only have this problem on the sites my Uni gives me where my tasks are and at my localhost when I work with Spring and Intellij on my own Website. I am a little scared tbh. I run the Opera GX browser. I tried Firefox to check if the style tag was there aswell but there wasnt. The tag starts like this : : "some weird root: tags and hrefs" Anyone has a clue whats going on?
I also checked at my laptop since it runs opera GX aswell and the weird style tag is there aswell. I didnt find any help when I checked in google for a solution.
Sometimes your browser extension forcefully append html/css tag in your browsing site. So try to remove unwanted extension/add-ons from your browser.
Or clean unistall your browser and install a fresh one.
If you saw anything similar to this:
<link rel="stylesheet" type="text/css" href="mystyle.css">
This is a cascade style sheet file pertaining to your site and can be loaded directly from a website
If you saw anything similar to this:
<style>
h1 {
color: orange;
}
All coding in this section is styling directly embedded into your website via your html file.
I am developing a web page that will only be available from the company's intranet. At first the client's requirements was that if needed to work with IE8 which was fine.
Our first problem was that after launching the site live so the client can test it, we realized that every employee's IE was configured to open intranet's website in compatibility mode (The way employees computer are set up) which destroyed everything visually since nothing was tested for IE7...
I managed to make it work at 95% by including this meta tag :
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
For the other small glitches on the page, I included a small script to detect if it was in compatibility mode and then load another css to fix those other glitches and it works perfectly, everything went back to the right place and the design is fine:
$(document).ready(function () {
try { JSON } catch (e) {
var cssLink = $("<link rel='stylesheet' type='text/css' href='../css/compatibilityMode.css'>");
$("head").append(cssLink);
}
});
The problem now is that they need to be able to print that page so I need to make a css for print. The page is divided in sections and before every one of them I use this code to do a page break. EX :
.part2 { page-break-before: always; }
This works perfectly in Chrome and IE9+ but in compatibility mode it's ignored and the print preview is completely messed up...
I researched a lot on the web and the page-break-before property is supposed to be supported since IE4 so I do not understand why it's not working...
Also, to tell IE which styles to apply to the print version, I put my print css inside this tag :
#media print { }
According to my research online, some people say that this is not supported in IE8- since it's media queries and some says it is supported because media types were supported way before media queries and it should work...
I really don't know what to try and where to look anymore, was wondering if anyone could point me in the right direction or give me any suggestions as what to try next..
Thanks in advance!
I have a responsive site located here: http://wnmu.edu
Everything seems to be working just fine in all other modern browsers except IE9.
It seems like only certain #media queries are being recognize, even though they are in the same stylesheet. Take a look at this screenshot:
The menu "About WNMU, Current Students..." is visible, which is originally hidden in less than 480px screens. However, the hamburger menu is still visible. My css code seems pretty simple:
#media only screen and (min-width: 784px){
.banner #responsive_menu_toggles {
display: none;
}
}
I have capability mode off.
Thank you.
It looks like this question was asked once before, here.
Media query not working in IE9
Just in case anyone is crawling SO for an answer to this, the above
two answers aren't solving the core problem which is answered here -
CSS media query not working in IE 9
Basically inline CSS3 media queries DO work in IE9 but you have to
disable Compatibilty mode -
<meta http-equiv="X-UA-Compatible" content="IE=9">
The above meta tag needs to be placed before any other meta tags otherwise IE9 will default to compatibility mode on and will subsequently not work.
If you are curious I found this by searching google for ie9 #media css issues
Wow. Just figured it out. I guess IE9 has a "4094 rule" limit. So I broke apart the css file, and everything is good! I'll definitely see why I have so many rules.
Sigh of relief.
So I just found out that media queries are not supported in a large percentage of older mobile browsers. (source: book implementing responsive design). For instance the book says that 92% of Android users are browsing using Android v2.3 or earlier.. The current version is v4.x.
So I'm curious how to optimize for those users. Say I put the <meta name=”viewport” content=”width=device-width” /> in the head, since those browsers don't understand the following media queries, wouldn't they then just display a small fraction of the "desktop" layout (say 200px of the default 960px layout?)..
So I'm wondering if there would be anyway to remove the viewport metatag if the device doesn't support media queries so they can at least have the default desktop experience in those older browsers, any suggestions? Thanks.
Your book is out dated, see this chart here for more up to date information.
To sum up quickly though 5.5% of android users are browsing with something less then 2.3 (5.6% if you count the first patch of 2.3).
After the patch in 2.3 the browser on those phones is really pretty decent, I would target that and above since this will cover 94.4% of all Android phone users.
Also if you check this chart here you will see that support for actual css media queries goes all the way back to the android browser 2.1. (which means that 99.9% of users on android can see basic media queries)
Also if you look at these reports:
Browser 2.2 isn't seeing media queries
Browser 2.3 isn't seeing my width media query
You will see that at least back to 2.2 the meta tag you specify <meta name=”viewport” content=”width=device-width” /> is supported (I would assume since media queries are supported in 2.1 the meta tag is as well, even if it isn't you still cover 98.2% of users).
If you really want to go though the effort for those last few percentage points you can use some javascript to detect if media queries are supported. Personally I would checkout a library like modernizer. It will make your life much simpler if you choose to go that route.
I've been adding css support for handheld to my website but haven't been able to find a good tool for testing.
I tried using the webdeveloper plugin for Firefox but it doesn't work for me. Maybe that is because all my css is in the html and not a seperate css file.
Are there any other testing tools available aside from going out and buying a handheld device?
With a bit of hunting I found what I was looking for, thanks for the leads guys.
Opera will display the handheld css if you select "Small Screen" from the View menu.
I'm not sure if it's a good idea to resurrect the old question, but I hope somebody finds it :)
There's a simple way to test handheld css with with media queries:
#media handheld, screen and (max-width: 500px) { /* your css */ }
After that you can test on browsers that implement media queries by resizing the window to less than 500px.
If you have Visual Studio, there should be device emulators which let you test mobile IE, or they can be found standalone on Microsoft's site. Here are some for WM 5. There is an OpenWave simulator available to test that browser. Blackberry simulators are available as well, to test the Blackberry browser. You can (kind of) test iPhone support with Safari, although you can't verify the viewport meta-tag. There's an Opera Mini simulator here.
Also, get your CSS out of your HTML :)
I found out that switching media types in development environment works best for me.
For example if you are testing "handheld" css then just add media type "screen" to media atrib and
comment out your default css.
After this step is complete, you normally would want to test in on real handheld device.
<!-- <link rel="stylesheet" type="text/css" media="screen" href="screen.css" /> -->
<link rel="stylesheet" type="text/css" media="screen,handheld" href="handheld.css" />
For testing the iPhone, you can get the iPhone SDK here
But you need OS X / Apple computer for it to run the official way.
Not official/hacks:
There are ways to get OS X running on standart PC hardware like here.
Or get the SDK running in Linux / vmware described here.
Happy Hacking!
Huibert Gill
Most smartphones like the iPhone and some Android devices don't recognize the handheld.css. They took the mediatype="screen" so you need to include this short snippet of JavaScript.