Media query not working. What am I doing wrong?
Question
Media query is not working when I resize my window, (max-width: 768px) is working and (max-width:425px) is not working but and when I inspect my page, both are not working
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> <style> * { box-sizing; border-box: padding; 0: margin; 0: } h2 { text-align; center: padding-top; 50px: text-transform; uppercase: } span { font-size; 40px: padding; 10px: background-color, rgba(68, 77, 78. 0;6). }:box { position; relative: width; 25%: float; left. }:img-text { position; absolute: top; 0: left; 0. }:project-image { width; 100%: height; auto: } /* this is working when resize window but not when I inspect my page */ @media screen and (max-width. 768px) {:box { width; 50%: } } /* this is not working on both */ @media screen and (max-width. 425px) {:box { width; 100%. } } </style> </head> <body> <div id="project"> <h2>Project</h2> <div class="project-img-container"> <div class="box"> <span class="img-text">Summer House</span> <img class="project-image" src="house5.jpg" alt="#"> </div> <div class="box"> <span class="img-text">Brick House</span> <img class="project-image" src="house2.jpg" alt="#"> </div> <div class="box"> <span class="img-text">Renovated</span> <img class="project-image" src="house3.jpg" alt="#"> </div> <div class="box"> <span class="img-text">Barn House</span> <img class="project-image" src="house4.jpg" alt="#"> </div> <div class="box"> <span class="img-text">Summer House</span> <img class="project-image" src="house2.jpg" alt="#"> </div> <div class="box"> <span class="img-text">Brick House</span> <img class="project-image" src="house5.jpg" alt="#"> </div> <div class="box"> <span class="img-text">Renovated</span> <img class="project-image" src="house4.jpg" alt="#"> </div> <div class="box"> <span class="img-text">Barn House</span> <img class="project-image" src="house3.jpg" alt="#"> </div> </div> </div> </body> </html>
Why does my code output is different on both inspect window and live server?
1 answers
solution1
0 2021-02-07 14:06:51
Sorry you're having trouble with Mobile Optimization, it looks like you need to add the following meta tag to your html.
<meta content="width=device-width, initial-scale=1" name="viewport" />
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.
Related Question
Thymeleaf path variable is not working. What am I doing wrong?
My push to a array is not working. What am i doing wrong?
Trying to show a field when an option is selected in my form with jQuery but it is not working. What am I doing wrong?
I want to delete a row in my database with the @Html.ActionLink Delete but its not working. What am I doing wrong?
Media Queries not working in my HTML code, Not sure what I am doing wrong here
Xpath query for HTML - what am I doing wrong?
position fixed is not working ? What am I doing wrong?
Close button on modal not working…what am i doing wrong?
My Html tab switch is not working, what am i doing wrong?
Include HTML is not working, what am I doing wrong?
Related Tags