media query is not working in chrome
Question
I have written media query but its not working, and I can not figure out why. It should show one column below width 800px, but it remains same.
I am new in this field so may be I have done some stupid mistakes. The code looks fine. In this code the the column of the paragraph is two when I open it in big browser, but when I reduce its size it should be one column, but it remains same.
This is the html part
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="section">
<p>
mksajakjskakajkajk adjkajkaj adjakj ajksja adjkaj d nkkakcank ncaj jdka njdahj adnjkaj ndka jhjh cbnzbc njahjas jksjka znxzmn xnkxna xnak xankxna cnakxnak xnakxaanxa ajkxaj cjsijdssajksji sako sajib fh ghosh xnx, xmlala kk ckkxm lkal cmamca cmkkdk scnknvns snkcjk cskj mckj c. sakjob fg sajib ghosh sahoiu sajib fhosn sajin ghosh sajib ghosh sajinsahisajib ghosh sajib ghosh sajib ghosh
</p>
</div>
</body>
</html>
This is the css part
body
{
margin:auto;
width: 80%;
}
.section
{
width:70%;
margin: auto;
}
p
{
-webkit-columns:2;
-moz-columns:2;
}
@media screen and(max-width:800px)
{
p
{
color: red;
-webkit-columns:1;
-moz-columns:1;
}
}
4 answers
solution1
0 2015-09-19 09:34:55
Change your @media query by the below code :
@media (max-width:800px)
{
p
{
color: red;
-webkit-columns:1;
-moz-columns:1;
}
}
solution2
0 2015-09-19 09:36:10
@media screen and (max-width:800px) // give space after and
{
p
{
color: red;
-webkit-columns:1;
-moz-columns:1;
}
}
solution3
0 2015-09-19 09:36:22
Try this JSFiddle
You need a space between the and and the brackets.
@media screen and (max-width:800px)
solution4
0 ACCPTED 2015-09-19 09:37:45
Here is your mistake
@media screen and(max-width:800px)
You need to put space between "and" and parenthe
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.