@media screen and (max-width:768px) not working
Question
I'm creating a new website for my uni assignment but my @media screen and (max-width:720px) does not have any changes when I typed in the code as provided as below. What I am trying to do is that I want to make my navigation-links to hide under a burger to be display in mobile (will include javascript once this is working)
I had tried with
@media screen and (max-width:1280px){
#topnav {
width:100%;
background:#000000;
}
#brand {
width:15%;
display: inline-block;
}
#brand h1 {
display: inline-block;
font-family: sans-serif;
color: #fff;
font-size: 30px;
font-style: italic;
word-spacing: 5px;
line-height: 1.5;
margin: 0 0 0 0;
padding-left: 10%;
}
#search,form,button{
display: inline-block;
width: 30%;
height: 44px;
text-align: left;
margin: 0;
margin-left: 20px;
}
.srch_bar {
display:inline-block;
width: 300%;
border-radius: 5px;
height: 30px;
font-size: 20px;
font-weight: 600;
padding: 5px;
}
input {
border: none;
display: inline-block;
}
button {
border: none;
background-color: #fff;
height: 20px;
font-size: 20px;
cursor: pointer;
width: 10px;
padding: 0;
margin-left: 42%;
}
.clr-btn {
color:#636c72;
}
#link {
display: inline-block;
width: 45%;
}
#link a{
text-decoration: none;
font-size:20px;
color: #fff;
padding-left:1%;
padding-right:1%;
}
.szp {
color: #F07330;
font-size: 20px;
}
.szr {
color: #F20000;
font-size: 20px;
}
.szs {
color: #063780;
font-size: 22px;
font-weight: 600;
}
.szu {
color: #1E7305;
font-size: 24px;
}
and also with
@media screen and (max-width:1024px){
#topnav {
width:100%;
background:#000000;
}
#brand {
width:17%;
display: inline-block;
}
#brand h1 {
display: inline-block;
font-family: sans-serif;
color: #fff;
font-size: 25px;
font-style: italic;
word-spacing: 5px;
line-height: 1.5;
margin: 0 0 0 0;
padding-left: 10%;
}
#search,form,button{
display: inline-block;
width: 25%;
height: 44px;
text-align: left;
margin: 0;
margin-left: 15px;
}
.srch_bar {
display:inline-block;
width: 330%;
border-radius: 5px;
height: 30px;
font-size: 15px;
font-weight: 600;
padding: 5px;
}
input {
border: none;
display: inline-block;
}
button {
border: none;
background-color: #fff;
height: 20px;
font-size: 20px;
cursor: pointer;
width: 10px;
padding: 0;
margin-left: 42%;
}
.clr-btn {
color:#636c72;
}
#link {
display: inline-block;
width: 53%;
margin: 0;
}
#link a{
text-decoration: none;
font-size:18px;
color: #fff;
}
.szp {
color: #F07330;
font-size: 20px;
}
.szr {
color: #F20000;
font-size: 20px;
}
.szs {
color: #063780;
font-size: 22px;
font-weight: 600;
}
.szu {
color: #1E7305;
font-size: 24px;
}
}
both worked but when come to
@media screen and (max-width:768px){
}
it doesn't seem to be working btw I also have
<meta name="viewport" content="width=device-width, initial-scale=1.0">
linked in html otherwise my @media 1024px and 1280px won't work
@media screen and (max-width:720px){
body {
overflow-x: hidden;
}
#links{
position:absolute;
right:0px;
height: 92vh;
top:8vh;
background-color: #000000;
display: flex;
flex-direction: column;
align-items: center;
width: 40%;
transform: translateX(100%);
}
.burger {
display:block;
}
}
I want it to display none on the page first so I know it work properly
btw this is my html
<html>
<head>
<title>Solexton</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-
50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous">
<link rel="icon" href="C:\Users\User\Desktop\picas\s.png" type="image/png">
<link rel="stylesheet" href="C:\xampp\htdocs\wdt\asg\css\style.css" type="text/css">
</head>
<body>
<div id="topnav">
<div id="brand">
<h1 class="logo"><i class="fab fa-stripe-s"></i>olexton</h1>
</div>
<div id="search">
<form action="search.php" method="post">
<input class="srch_bar" type="text" name="search_key"
placeholder="Looking for..."/>
</form>
<button class="srch-btn" name="submit"><i class="fas fa-search clr-
btn"></i></button>
</div>
<div id="link">
<a href="promo.html"><i class="fas fa-percent szp"></i> Promotions</a>
<a href="room.html"><i class="fas fa-bed szr"></i> Rooms</a>
<a href="booking.html"><i class="far fa-bookmark szs"></i> Saved</a>
<a href="signin.php"><i class="far fa-user-circle szu"></i> Sign
In</a>
</div>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
</body>
</html>
3 answers
solution1
1 2019-07-30 07:56:03
You should write media queries from small screens to large screens. Becouse last line css code overwrites to over previous css lines. For example from bootstrap;
// Small devices (landscape phones, 576px and up)
@media screen and (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media screen and (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media screen and (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
solution2
0 2019-07-30 07:38:43
Check if you have some other media query that interfere in small screen size, you can use your browser Inspector, scale you screen size under 720px, select you body from the source (elements tab) and in the right sidebar check where the display property is set.
Maybe in other CSS the same element is targeted and the display property is set.
solution3
0 2019-07-30 07:44:42
Based on the code you have provided, your media queries are working, you just can't tell because there is no content.
The browser will display the default which is a white background unless you have specified otherwise, which based on the code supplied, there is nothing to show once the browser resizes above 720px .
Add some content to the body and try resizing the browser to the relative break-points, or perhaps try adding the below to visibly see the change.
@media screen and (max-width:768px){
body {
display: block;
background: #000;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.