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> </div>
<div> </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> </div>
<div> </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> </div>
<div> </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> </div>
<div> </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>©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) {
}