0

I'm building a website but I have a problem. I've searched on the web for hours but found no answer.

Initially - during the last phase of query responsive media - I've made a single and unique .css and inside I've divided the categories of resolutions using @media only screen and (...) {} etc. But I had to discard this way because some things overlap. For example, although I was in a resolution 1900px width, the browser was going to take the rules of a lower resolution.

So, I decided to separate the .css files according to the resolution (some css relate to the range of resolutions, others are specific resolutions). So, once created the css files, I've added this in the of html document:

    <!-- Custom CSS -->
        <link href="/css/style.css" rel="stylesheet">
<!-- @MEDIA QUERY CSS -->
        <link rel="stylesheet" media="screen and (min-device-width: 320px) and (max-device-width: 480px)" href="/css/media/320-480.css" />
        <link rel="stylesheet" media="screen and (device-width: 480px) and (device-height: 320px)" href="/css/media/480-320.css" />
        <link rel="stylesheet" media="screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="/css/media/768-1024.css" />
        <link rel="stylesheet" media="screen and (device-width: 1024px) and (device-height: 768px)" href="/css/media/1024-768.css" />
        <link rel="stylesheet" media="screen and (device-width: 1024px) and (device-height: 600px)" href="/css/media/1024-600.css" />
        <link rel="stylesheet" media="screen and (min-device-width: 1025px)" href="/css/media/1025.css" />
        <link rel="stylesheet" media="screen and (min-device-width: 1680px)" href="/css/media/1680.css" />
        <link rel="stylesheet" media="screen and (device-width: 1200px)" href="/css/media/1200.css" />
        <link rel="stylesheet" media="screen and (device-width: 1152px)" href="/css/media/1152.css" />
        <link rel="stylesheet" media="screen and (device-width: 1280px) and (device-height: 1024px)" href="/css/media/1280-1024.css" />
        <link rel="stylesheet" media="screen and (min-device-width: 481px) and (max-device-width:767px)" href="/css/media/481-767.css" />
        <link rel="stylesheet" media="screen and (device-width: 568px) and (device-height: 320px)" href="/css/media/568-320.css" />
        <link rel="stylesheet" media="screen and (device-width: 375px) and (device-height: 667px)" href="/css/media/375-667.css" />
        <link rel="stylesheet" media="screen and (device-width: 667px) and (device-height: 375px)" href="/css/media/667-375.css" />
        <link rel="stylesheet" media="screen and (device-width: 414px) and (device-height: 736px)" href="/css/media/414-736.css" />
        <link rel="stylesheet" media="screen and (device-width: 736px) and (device-height: 414px)" href="/css/media/736-414.css" />
        <link rel="stylesheet" media="screen and (device-width: 360px) and (device-height: 640px)" href="/css/media/360-640.css" />
        <link rel="stylesheet" media="screen and (device-width: 640px) and (device-height: 360px)" href="/css/media/640-360.css" />
        <!-- Bootstrap -->
        <link href="/css/bootstrap.min.css" rel="stylesheet">
        <link href="/css/bootstrap-theme.min.css" rel="stylesheet">

Trying to change the viewport in Firefox, all worked fine. So, I continued publishing on Altervista to see the result on the network. But, at this point, nor in the smartphone, nor the computer, nor changing the viewport, I get the desired result.

Analyzing the published page via Firefox, the only css file that is recognized is that of the bootstrap css. But, for example, in that file there aren't anything about the resolution of 320px - and yet it is as if he ignore my 320-480.css file.

At first I thought it was an error of relative URLs, but it doesn't.

I can not get out. Someone would know help me? Thank you in advance.

panagulis72
  • 2,129
  • 6
  • 31
  • 71

2 Answers2

1

In your <link> tage in href argument you have a string like href="/css/media/320-480.css" but you need to have href="css/media/320-480.css". Without / before folder name.

Here a nice demo, how media queries works, please check it!

/*
  CSS-Tricks Example
  by Chris Coyier
  http://css-tricks.com
*/

@charset "utf-8";

* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; background: #ccc; }

article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }

h2 { font: 24px Georgia; margin: 0 0 10px 0; }
h3 { margin: 0 0 8px 0; }
p { margin: 0 0 20px 0; }

#fluid-wrap {
  width: 70%; 
  margin: 60px auto;
  padding: 20px;
  background: #eee;
  overflow: hidden;
}

#sidebar {
  width: 35%;
  float: left;
}

#sidebar ul {
  list-style: none;
}

#sidebar ul li a {
  color: #900;
  text-decoration: none;
  padding: 3px 0; 
  display: block;
}

@media (min-width: 1001px) {
  #sidebar ul li a:after {
    content: " (" attr(data-email) ")";
    font-size: 11px;
    font-style: italic;
    color: #666;
  }
}

@media (max-width: 1000px) and (min-width: 700px) {
  #sidebar ul li a:before {
    content: "Email: ";
    font-style: italic;
    color: #666;
  }
}

@media (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  #sidebar ul li a {
    padding-left: 21px;
    background: url(../images/email.png) left center no-repeat;
  }
}

#main-content {
  width: 65%;
  float: right;
}
<!DOCTYPE html>
<head>
  <meta charset='UTF-8'>

  <title>CSS Media Queries Sidebar</title>

  <link rel='stylesheet' href='css/style.css' />

  <!--[if IE]>
  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

  <script src='//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
  <script src='js/example.js'></script>
</head>

<body>

<div id="demo-top-bar">

  <div id="demo-bar-inside">

    <h2 id="demo-bar-badge">
      <a href="/">CSS-Tricks Example</a>
    </h2>

    <div id="demo-bar-buttons">
          </div>

  </div>

</div>
  <div id="fluid-wrap">

    <div id="sidebar">
      <h3>Super team:</h3>
      <ul id="nav">
         <li><a data-email="chriscoyier@gmail.com" href="mailto:chriscoyier@gmail.com">Chris Coyier</a></li>
         <li><a data-email="isuredo@likeher.com" href="mailto:isuredo@likeher.com">Elisabeth Moss</a></li>
         <li><a data-email="marry@me.com" href="mailto:marry@me.com">Amanda Righetti</a></li>
      </ul>
    </div>

    <div id="main-content">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    </div>

  </div>

   <style type="text/css" style="display: none !important;">
 * {
  margin: 0;
  padding: 0;
 }
 body {
  overflow-x: hidden;
 }
 #demo-top-bar {
  text-align: left;
  background: #222;
  position: relative;
  zoom: 1;
  width: 100% !important;
  z-index: 6000;
  padding: 20px 0 20px;
 }
 #demo-bar-inside {
  width: 960px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
 }
 #demo-bar-buttons {
  padding-top: 10px;
  float: right;
 }
 #demo-bar-buttons a {
  font-size: 12px;
  margin-left: 20px;
  color: white;
  margin: 2px 0;
  text-decoration: none;
  font: 14px "Lucida Grande", Sans-Serif !important;
 }
 #demo-bar-buttons a:hover,
 #demo-bar-buttons a:focus {
  text-decoration: underline;
 }
 #demo-bar-badge {
  display: inline-block;
  width: 302px;
  padding: 0 !important;
  margin: 0 !important;
  background-color: transparent !important;
 }
 #demo-bar-badge a {
  display: block;
  width: 100%;
  height: 38px;
  border-radius: 0;
  bottom: auto;
  margin: 0;
  background: url(/images/examples-logo.png) no-repeat;
  background-size: 100%;
  overflow: hidden;
  text-indent: -9999px;
 }
 #demo-bar-badge:before, #demo-bar-badge:after {
  display: none !important;
 }
</style>
</body>

</html>
AleshaOleg
  • 2,171
  • 1
  • 15
  • 29
  • Thank you for your answer, i tried but nothing. The problem is that the browser can see some rules of my css files..but many of them are covered and replaced by boostrap. Why does this happen just when i publish it? – panagulis72 Aug 10 '15 at 20:00
  • @panagulis72 Are you sure that you css files goes afer bootstrap css? – AleshaOleg Aug 10 '15 at 20:10
  • yes i'm sure because in my computer i see before my css effects – panagulis72 Aug 10 '15 at 20:18
  • @panagulis72 [here](https://css-tricks.com/examples/MediaQueriesSidebar) a nice demo how it works! Also I updated the answer, please check it. – AleshaOleg Aug 10 '15 at 23:32
0

The screenshot you attached is pretty clear. It states that the media queries you are trying to use have been deprecated and should no longer be used. For example according to the MDN docs for device-width

This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.

Also see this other StackOverflow question: Should I use max-device-width or max-width?

You should also be able to check your browser dev tools network tab to see if your CSS files are even being loaded, and if there are any errors trying to load the files.

Community
  • 1
  • 1
CodingWithSpike
  • 42,906
  • 18
  • 101
  • 138