Clever Geek Handbook

IE does not recognize my media queries

In other browsers it is recognized and functional, but IE doesn't seem to recognize my media queries. Is there something wrong with my codes? I made one similar design like this one, no problem but it is confusing. Why doesn't he recognize?

Here is the css:

/* This css is for small Mobile Devices */
@media (max-width: 767px) {
	 a, a:focus, a:hover, a:active {outline: 0;}
	.slogan h2 {padding: 10px 0px;font-size: 18px;}
	.navbar-header a {padding: 14px 0;}
	.left_content_video {float: none;}
	.right_content_video {float: none;}
	.left_content_video {float: none;}
	.right_content_video {float: none;padding-bottom: 4px;}
	.left_content_video {margin-right: 0px;margin-bottom: 30px;padding-bottom: 5px;}
	.navbar-nav {margin: 0px;}
	.single_content_btm_ico {margin-bottom: 30px;}
	.content_videos h1 {margin-left: 14px;}
	.navbar-form {display: none;}
	.open > .dropdown-menu {
	/*customization*/
	display: block;}
	.video_panel {}
	.video_panel h1 {background: #23262a none repeat scroll 0 0;font-size: 15px;padding: 12px 10px;}
	.clip_content {width: 100%;background: #FFFFFF;margin-bottom: 30px;}
	.video_panel_maincontent_1 h1, .video_panel_maincontent_2 h1, .video_panel_maincontent_3 h1, .video_panel_maincontent_4 h1 {margin-left: 15px;color: #ddd;display: inline-block;}

}

/* This css is for Tablet Devices */
@media (min-width: 768px) {
	a, a:focus, a:hover, a:active {outline: 0;border: none;}
	.slogan h2 {padding-top: 32px;}
	.logo img {padding: 12px 0px 0px;}
	.dropdown-toggle, .divider {display: none;}
	.navbar-header a {padding: 27px 0;}
	.videos {
	  float: left;
	  margin-right: 30px;
	  width: 185px;}
	  .left_content_video {
	  margin-bottom: 30px;}
	  .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
	  min-height: 1px;
	  padding-left: 33px;
	  padding-right: 15;
	  position: relative;}
	.left_content_video {float: left;}
	.right_content_video {float: right;}
	.left_content_video {margin-right: 5px;}
	.slider {margin-top: 30px;}
	.content_videos {margin-top: 30px;}
	.navbar-nav {margin: 0 50px 0px;}
	.twitter_box:hover {background: #B32D45;}
	.facebook_box:hover {background: #B32D45;}
	.google_box:hover {background: #B32D45;}
	.content_videos h1 {margin-left: 31px;}

	li.dropdown:hover > a.dropdown-toggle {background:#333;}

	.dropdown:hover .dropdown-menu {display: block;margin-top: 0; // remove the gap so it doesn't close}
	.dropdown:hover .dropdown-menu {
	/*customization*/
	/*color: #333;*/
	background-color: #61D8A2;
	display: block;}
	.dropdown-menu > li > a {background-color: #2C2C2C;}
	li.dropdown:hover > a.dropdown-toggle{
	background:#2C2C2C;}
	.dropdown-menu > li > a {border-bottom: 1px solid #3c3c3c;}
	.video_panel {margin-left: 175;}
	.clip_content {width: 100%;height: 385px;background: #FFFFFF;margin-bottom: 30px;}
	.navbar-form {display: none;}
}

/* This css is for Medium Devices */
@media (min-width: 992px) {
	a, a:focus, a:hover, a:active {outline: 0;border: none;}
	.slogan h2 {padding: 37px 0px;}
	.dropdown-toggle, .divider {display: none;}
	.navbar-nav {padding-left: 100px;}
	.navbar-header a {padding: 27px 0;}
	.videos {width: 185px;}
	.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
	  min-height: 1px;
	  padding-left: 15px;
	  padding-right: 15px;
	  position: relative;}
	.slider {margin-top: 30px;}
	.navbar-nav {margin: 0px;}
	.twitter_box:hover {background: #B32D45;}
	.facebook_box:hover {background: #B32D45;}
	.google_box:hover {background: #B32D45;}
	.content_videos h1 {margin-left: 14px;}
	.dropdown:hover .dropdown-menu {
	/*customization*/
	/*color: #333;*/
	background-color: #61D8A2;
	display: block;}
	.dropdown-menu > li > a {background-color: #2C2C2C;}
	li.dropdown:hover > a.dropdown-toggle{
	background:#2C2C2C;}
	.dropdown-menu > li > a {border-bottom: 1px solid #3c3c3c;}
	.video_panel {margin-left: 235px;}
	.clip_content {width: 100%;height: 165px;background: #FFFFFF;margin-bottom: 30px;}
	.video_panel_maincontent_1 h1, .video_panel_maincontent_2 h1, .video_panel_maincontent_3 h1, .video_panel_maincontent_4 h1 {margin-left: 15px;}
}

/* This css is for Large Devices */
@media (min-width: 1200px) {
	a, a:focus, a:hover, a:active {outline: 0;border: none;}
	.slogan h2 {padding: 37px 0px;}
	.logo img {padding: 12px 0px;}
	.dropdown-toggle, .divider {display: none;}
	.navbar-nav {padding-left: 150px;}
	.dropdown-menu > li > a {border-bottom: 1px solid #3c3c3c;}
	.navbar-header a {padding: 27px 0;}
	.navbar-nav li ul li a:hover,
	.navbar-nav li ul li a:focus,
	.dropdown:hover .dropdown-menu {
	/*customization*/
	/*color: #333;*/
	background-color: #61D8A2;
	display: block;}
	.slider {margin-top: 30px;}
	.videos {width: 235px;}
	.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
		  min-height: 1px;
		  padding-left: 15px;
		  padding-right: 15px;
		  position: relative;}
	.slider {margin-top: 30px;}
	.navbar-nav {margin: 0px;}
	.twitter_box:hover {background: #B32D45;}
	.facebook_box:hover {background: #B32D45;}
	.google_box:hover {background: #B32D45;}
	.content_videos h1 {margin-left: 14px;}
	.dropdown:hover .dropdown-menu {
	/*customization*/
	/*color: #333;*/
	background-color: #61D8A2;
	display: block;}
	.dropdown-menu > li > a {background-color: #2C2C2C;}
	li.dropdown:hover > a.dropdown-toggle{
 	background:#2C2C2C;}
 	.video_panel {margin-left: 300px;}
 	.video_panel_maincontent h1 {padding: 15px;display: block;border-bottom: 1px solid #DDD;}
 	.video_panel_maincontent_1 h1, .video_panel_maincontent_2 h1, .video_panel_maincontent_3 h1, .video_panel_maincontent_4 h1 {margin-left: 15px;border-bottom: 1px solid #BAC0C4;display: block;width: 1140px;;color: #BAC0C4}
 	.clip_content {width: 100%;height: 202px;background: #FFFFFF;margin-bottom: 30px;}
}
Run codeHide result


+3


source to share


1 answer


Check if you have this line of code in your html header. Sometimes sometime people forget to write this single line, because of which media queries will not work.



<meta name="viewport" content="width=device-width, initial-scale=1">
+2


source






More articles:


All Articles