i write down the all media queries in style sheet. but the problem is that when i check the my web page on a proper break point like 1024px then the page don’t show me proper response when i inspect the page the it show me the other break point like 1200px… let me know how i resolve this problem
You will need to show us your code. When posting your code start with a line of three backticks ``` then start your code starting on a separate line, then three more backticks on a line of their own.
The OP has created another thread about this same topic. I am going to ask the moderators if someone would like to merge these threads. If they do, the other topic should be appended to this one.
1 Like
media queries are not working properly
Hi, xunaidali24. Welcome to the forums.
In what ways are the medial querites not working properly?
Please show us your code on a working page that demonstrates the problem so we can see what isn’t working for you.
Please DO NOT create another post about this same topic.
</head>
<body>
<header>
<div id="logo">
<img src="images/logo.fw.png" alt="logo">
</div>
<ul class="topnav" id="myTopnav">
<li>
<a class="active" href="#home">Home</a>
</li>
<li>
<a href="#news">News</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a class="active" href="#home">Home</a>
</li>
<li>
<a href="#news">News</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li class="icon">
<a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
</li>
</ul>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</header>
<section>
<div id="box1">
<div class="inner0">
<h1 class="h1">OFFERING</br> THE COMPLETE
<br> PICTURE OF YOUR HOME
</h1>
</div>
</div>
<div id="box2">
<video width="100%" height="auto" controls>
<source src="pic1.fw.png" type="video/mp4">
<source src="pic2.fw.png" type="video/ogg">
</video>
</div>
</section>
<section class="sec">
<div id="box3">
<h1>A FEW WORD <br>ABOUT US</h1>
<p>The Centrium’s eye catching geometric design grows from its complex glazed facade and external concrete fins, creating a building which is both stunning and sustainable. Reflected in every apartment is the aesthetically simple yet beautiful rendition of function and flexibility. The Centrium is going to be another name of class living that encompasses all key elements of fine living. The Centrium provides a range of spacious 1, 2, and 3 bedroom apartments; giving future owners a broad based range to select according to their family needs. Reflected in every apartment is the aesthetically simple yet beautiful rendition of function and flexibility. From the feature ceilings and walls to be accented furniture and artwork, one finds a soothing blend of elegance and simplicity that suit individual spaces and lifestyles. Different room settings each with its own collection work in harmony to provide the ultimate comfort in premium condominium living.</p>
</div>
<div id="box4">
<img src="images/aboutUs-img1.png" width="100%" height="auto">
</div>
</section>
<section class="sec1">
<div class="inner" title="featuers">
<h1 style="position:absolute; left:10px;" id="ceo">CEO Message</h1>
<p><strong>THE CENTRIUM</strong> <b>"</b>occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut a perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, to a eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam is voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione this voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci a velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat unde omnis to iste natus error sit voluptatem accusantium totam rem aperiam.<b>"</b></p>
</div>
</section>
<div id="service">
<div id="serv">
<h1 id="services">Our<br>Services</h1>
<p><img src="images/b.png">Allergen Screening</p>
<p><img src="images/b.png">Bacteria Sampling</p>
<p><img src="images/b.png">Electrical</p>
<p><img src="images/b.png">Roofing</p>
<div id="serv2">
<p><img src="images/b.png">Allergen Screening</p>
<p><img src="images/b.png">Bacteria Sampling</p>
<p><img src="images/b.png">Electrical</p>
<p><img src="images/b.png">Roofing</p>
</div>
<div id="serv3">
<h1>OUR COMMITMENT</h1>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteurto sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut per piciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.
</p>
</div>
<div id="serv4">
<h1>WHY AIR INSPECTION?</h1>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteurto sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut per piciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.
<p>
</div>
</div>
</div>
Threads merged.
2 Likes
Hi, xunaidali24.
Can you edit your post and add the CSS to the top of the page? Then we should have a “working page” that demonstrates the problem. Without the CSS, the styles are missing.
i dnt knw how to attach the ccs code in my post
OK, then include the CSS in your next post. The CSS includes the media queries.
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.