Media query link/file not working

Greetings,

please end my 1 month depression of this and help me out, I am sure my media query code is correct but it’s not working
not working on any browser, I tried 3 different computers to code on, still not working. What is happening???

here is the HTML:

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="description" content="Desgin + research">
<meta name="keywords" content="architecture, website, design, web development">
<meta name="author" content="Abdulrahman Mushref">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!---------- Title + icon ---------->
<title>Welcome to urbanphenomena</title>
<link rel="shortcut icon" href="favicon.ico"/>
</head>
<!---------- Start of body ---------->
<body>
<div class="navbar-fixed-top">
 <div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavenderblush;;">1</div>
 <div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavender;">2</div>
  <div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavenderblush;">3</div>
 <div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavender;">4</div>
 <div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavenderblush;">5</div>
 <div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavender;">6</div>
 <div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavenderblush;">7</div>
 <div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavender;">8</div>
 <div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavenderblush;">9</div>
 <div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavender;">10</div>
 <div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavenderblush;">11</div>
 <div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavender;">12</div>
 </div>  
<!---------- Start of Nav ---------->
<div class="container-fluid">
   <div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
      <!-------- Nav header/toggle button -------->
      <div class="navbar-header">
         <span class="sr-only">Toggle Navgiation</span>
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#demo">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
          </button>
      </div>
      <!-------- Navigation Menu -------->
      <div class="navbar-collapse collapse" id="demo">
        <ul class="nav navbar-nav">
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#project">Projects</a></li>
            <li><a href="#location">Location</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
      </div>
   </div>
</div>
    <!-------- Home Section -------->
<div class="jumbotron">
  <div class="container-fluid section-home" id="home">
  <div class="row">
  <div>
  <!---------- Title ---------->
   <div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1">
    <h1 class="title" style="font-size:100px; color:#f6f6f6;"><strong>urbanphenomena</strong></h1>
    <h1 class="title" style="font-size:70px; color:#f6f6f6; margin-top: -20px;">design+research</h1>
   </div>
  </div>
  </div>
  </div>
</div>
<!-------- About Section -------->
<section class="container-fluid section-about" id="about">

<!-------- About Text -------->
  <div class="row">
   <b class="col-lg-12 col-md-12 col-sm-12 col-lg-push-1 b">About</b>
    <div class="col-lg-5 col-md-6 col-sm-6 col-lg-push-1">
    <p>urbanphenomena: design+research, is a multi-disciplinary design consultancy studio based in Jeddah, with satellite offices in Madinah and Riyadh. From its inception, the studio has focused on bringing aspects of our local culture to a wider audience via the platform of design and research. Through our design work we provide clients and partners with architectural, interior design, wayfinding and graphic design services; using a combination of concepts, drawings, models and local market know-how. The type of projects vary, but the common denominator has always been “identity”; evolving a local identity for the project with contemporary functions and use. Weaving this approach for a wide variety of finished projects, ranging from commercial office spaces, exhibition stands to schools and cultural buildings.</p>
    </div>
    <div class="col-lg-5 col-md-6 col-sm-6 col-lg-push-1"><span class="pull-right">
    <p>To compliment or design activity, we continuously conduct a variety of research work and consultancy, providing advisory services on the built environment and its interaction with the urban context and culture. This research is then used for projects as presentations, in the form of reports with our design projects, or submitted to publications for print (books or professional journals) and as online articles. As part of the think tank activities of “urbanphenomena”, we have been active in research and publishing on the current condition of architecture practice and design in the region. Our research covers topics such as urbanism in the Middle East, Islamic architecture of Central Asia, Japanese Architecture and urbanism, information architecture, way-finding in the built environment, and mapping the cultural identity of cities.</p>
    </span>
    </div>
  </div>
</section>


<!-------- Projects Section -------->
<section class="container-fluid section-project" id="project">
    <div class="row">
       <div class="col-lg-12">
        <b class="col-lg-offset-1 col-lg-push-1 b">Projects</b>
        <!-------- SlideShow -------->
        
        
       
        
      
       </div>
   
   </div>
</section>

<!-------- Location Section -------->
<section class="section-location" id="location">
   <!-------- MAP -------->
    <div id="map"></div>
</section>


<!-------- Contact Section -------->
<section class="container-fluid contact-section" id="contact">
    <div class="row">
        <div class="col-lg-12 col-lg-push-1 col-md-12 col-sm-12 col-xs-11">
            <div class="row">
                <b class="b col-lg-12">Contact Us</b>
            </div>
            
        <!-------- Contact INFO -------->
    <div class="row">
        <div class="col-lg-7 col-md-7 col-sm-8 col-xs-7">
            <div>&nbsp;</div>
            <div>&nbsp;</div>
    <h3>Address</h3>
    <span>4140 Al Kayyal, Ar Rawdah<br>Jeddah 23434-8287<br>Saudi Arabia</span>
        </div>
        
        <div class="col-lg-2 col-md-4 col-sm-3 col-xs-5">
            <div>&nbsp;</div>
            <div>&nbsp;</div>
          <h3>Hours</h3>
          <span><strong>Sunday - Thrusday</strong> 8am - 6pm<br><strong>Friday - Saturday</strong> Weekend<br></span>
        </div>  
    </div>    
    <div class="row">
        <div class="col-lg-7 col-md-7 col-sm-8 col-xs-7">
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <h3>E-mail</h3>
            <span><a href="mailto:info@urbanphenomena.net">info@urbanphenomena.net</a></span>
        </div>
        <div class="col-lg-2 col-md-5 col-sm-3 col-xs-5">
            <div>&nbsp;</div>
            <div>&nbsp;</div>
          <h3>Phone</h3>
          <span>+966 12 660 4229</span>
        </div>  
    </div>
</section>
<!-------- Footer -------->
    <footer class="container-fluid footer" id="footer">
        <div class="row">
            <div class="col-lg-12 col-lg-push-5 
                        col-md-12 col-md-push-5
                        col-sm-12 col-sm-push-4
                        col-xs-12 col-xs-push-3">
                <span>&copy;2016 urbanphenomena, Jeddah</span>
            </div>
        </div>
    </footer>


<!---------- BootStrap & CSS ---------->
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<link href="css/responsive.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<!---------- JQuery & Other scripts ---------->
<script src="map.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBD0ZZoFqm2UobxsJB1cyuF6vnti2qSbsA&callback=initMap" async defer></script>
<script src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

here is the Media query:

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

This is a bit of a guess, but I’m wondering whether it’s due to the order your CSS files are listed. Assuming that style.css is your own CSS rule set containing the media queries (you don’t actually say which file they’re contained in), then having the boostrap.min.css being added afterwards, may well be overriding your own styles with Bootstrap’s CSS.

1 Like

media query code is in “responsive.css”

“style.css” is for the page styles.

How do you know it’s correct?

I’m not used to seeing both min and max, and usually not “device”.

AFAIK what I’v see are either desktop first or mobile first with media queries at “break points” instead of trying to cover all the possible min-max ranges.

that and where. Shouldn’t the <link>s be in the <head>?

2 Likes

I usually add links on the head, but for optimizing (fast load) purposes I added the link at the bottom.

I currently changed the html like this:

<html>

<head>
<meta charset="UTF-8">
<meta name="description" content="Desgin + research">
<meta name="keywords" content="architecture, website, design, web development">
<meta name="author" content="Abdulrahman Mushref">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!---------- Title + icon ---------->
<title>Welcome to urbanphenomena</title>
<link rel="shortcut icon" href="favicon.ico"/>
<!---------- BootStrap & CSS ---------->
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<link href="css/responsive.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
</head>

Normally, I’d have thought they ought to appear in this order, though it depends on exactly what each files contains - I’m reasonably certain that the Boostrap CSS ought to come first though . And yes they should be in the <head> section, otherwise you are loading your <body> content before there’s anything loaded to style it, which may result in a flash of unstyled content before the CSS gets there.

<!---------- BootStrap & CSS ---------->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/responsive.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css"/>
3 Likes

I tried that and followed your advise,
I treid and removed all this code crap of “min” and “device” and stuck with only “max-width”

like this:

@media(max-width:576px) {
    p{color:red;}
}

and it worked, thank you a lot!!!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.