I am new to CSS media queries, and I was first trying to get pdf/mp3/mp4 buttons to get centered on this page whenever a mobile device is using it (http://www.mannachurch.org/portfolio-type/recycled-junk/). Keep in mind for that I am using a highly modified wordpress theme.
So I tried experimenting to isolate this issue. However, I don't seem to have any control over using media queries and I can't even perform anything even on this simple HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style type="text/css">
body{background-color: blue;}
#media only screen and (min-device-width : 599px) and (max-device-width : 600px) {
body {background-color:black;
}
}
</style>
</head>
<body>
<p>This is an experiment<p/>
</body>
</html>
What am I doing wrong?
Your media query only leaves a one pixel range to work with. Between 599 and 600. You would want something like:
#media only screen and (max-device-width : 600px) {
body {background-color:black;
}
}
Add viewPort Meta tag in your tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Here is reference : http://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design
Can you fix you width properties as you have a 1px differencial
min-device-width : 599px
max-device-width : 600px
I found a solution that worked. This question was sparked from a theme I am trying to customize in wordpress. The editor in wordpress is REALLY wonky. At least now I know I'm doing the CSS media queries right. This is what worked:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title of the document</title>
<style type="text/css">
/*-- EUREKA!!! IT works! */
body{background-color: blue;}
#media all and (min-width: 250px) and (max-width: 400px) {
body{
background-color:black;
}
}
#media all and (min-width: 640px) and (max-width: 760px) {
body{
background-color:black;
}
}
#media all and (min-width: 768px) and (max-width: 1024px) {
body{
background-color:black;
}
}
</style>
</head>
Related
I need to create desktop and mobile versions of the site. I decided to use media queries in CSS. But when I coded them, I found out that they aren't working and I don't know how to fix them. To fix this issue I went to Youtube where found this example, but I implemented that I found that the media query doesn't work. Then I went to stack and found a similar problem. In that case, it was fixed by adding a meta tag in the head. I did that, but it didn't help me. It wasn't work in chrome and Mozilla.
body{
color:red;
}
#media screen and (max-width: 600){
body{
color: blue;
}
}
<!DOCTYPE html>
<html>
<head>
<title>The car dealer site</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<h1>Title</h1><br>
<h2>Subtitle</h2>
</body>
</html>
You need to specify the units for your max-width property. Change the line
#media screen and (max-width: 600){
to
#media screen and (max-width: 600px){
And try it again
First of all I am really sorry for the title of the question as I wasn't able to figure out on how to describe my problem, so this is why I used such title.
Right now I am starter in using media queries and I am using them on my practice project for its responsiveness and I want to apply an orientation lock on that project. Like, the project is compatible on the mobile portrait view but it is not available on the mobile landscape view.
I have applied the following code for the orientation lock, but the problem is that when the browser window is resized and when it matches the screen resolution, the lock applies. I don't want the lock to get applied on the desktop view.
There is a way which is by using device-width but that has been deprecated by mozilla. So, is there any way to resolve this issue with only min-width or something else?
Please let me know if you are unable to understand.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
<style>
#div-2{
display:none;
}
#media screen and(min-width:320px) and (orientation:landscape){
#div-1{
display:none;
}
#div-2{
display:block;
}
}
</style>
</head>
<body>
<div id="div-1"><p>Orientation lock not applied.</p></div>
<div id="div-2"><p>Orientation lock applied.</p></div>
</body>
Ok i understand now replace the code hope this is useful for you:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<style>
#media screen and (min-width: 320px) and (orientation:landscape) {
#div-1 {
display: block;
}
#div-2 {
display: none;
}
}
#media screen and (min-width: 961px) and (orientation:landscape) {
#div-2 {
display: none;
}
#div-1{
display:block;
}
}
</style>
</head>
<body>
<div id="div-1">
<p>Orientation lock not applied.</p>
</div>
<div id="div-2>
<p>Orientation lock applied.</p>
</div>
</body>
</html>
I think there is not any strange thing.
You write this media query:
#media only screen and (min-width:320px) and (orientation:landscape) {
#div-1 {
display: none;
}
#div-2 {
display: block;
}
}
That contains desktop. So in desktop div-1 is hide and div-2 is visible.
If you want this media query works only for mobile you must use max-width
that filters screens that are larger than what you want(Desktop). It means that styles are not for desktop.
This media query works on size of browser and if you want to filter some Devices size independent of browser width you must use this media query:
#media only screen and (max-device-width: 320px)
I created my website and want to make it mobile friendly.
So I created a media query and started working with it. Checking while scaling my browser window.
If I check the same page on a phone it doesn't change the layout.
I can't see what I'm missing.
Here is what I have:
HTML:
<div>
<p>
<h2>Title</h2>
</p>
</div>
CSS:
#media (max-width: 768px) {
h2{
font-size:2.5vw !important;
}
}
h2{
font-size:1.5vw;
}
Hope I missed just a small thing :-)
M.
Sounds like you need to tell the device to use its actual pixel width:
<meta name="viewport" content="width=device-width, initial-scale=1">
Some devices will render pages assuming they are not optimized for mobile. Put that meta tag in your <head> tags and let us know if that fixes it. More info here.
Try adding this into your code:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
Try this
#media only screen and (max-width:768px) { ... }
OR
#media only screen and (min-width:320px) { ... }
I wrote a simple HTML program for experimental purposes:
Here is the code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: green;
}
#media screen and (device-height: 375px) and (device-width: 667px) {
body {
background-color: blue;
}
}
</style>
</head>
<body>
<p>Media queries are simple filters that can be applied to CSS styles. They make it easy to change styles based on the characteristics of the device rendering the content, including the display type, width, height, orientation and even resolution.</p>
</body>
</html>
But ut doesn't change color when it is tried in iPhone 6. What is wrong with the code? Is logical expression correct?
this works for me on the iphone 6:
#media only screen and (min-device-width: 374px) and (max-device-width: 376px)
this works on the iphone 6+:
#media only screen and (min-device-width: 413px) and (max-device-width: 415px)
This works in a browser and hopefully on your IPhone too:
(Max-width and min-width instead of device-height and device-width)
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: green;
}
#media screen and (max-height: 375px) and (max-width: 667px) {
body {
background-color: blue;
}
}
</style>
</head>
<body>
<p>Media queries are simple filters that can be applied to CSS styles. They make it easy to change styles based on the characteristics of the device rendering the content, including the display type, width, height, orientation and even resolution.</p>
</body>
</html>
Use max-device-width and min-device-height.
#media all and (min-device-width: XXXpx) and (max-device-width: XXXpx)
I am building an reponsive-website, having 3 sizes. Max 480px, max 768px and max 1024px+;
However, I have a problem when using the iPad. On a Galaxy Tab 10.1 it works like a charm, in my browser it works also good.. but it seems that whenever I use the iPad it always seems think the max-width is 768px.
This is what I mean:
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<style type="text/css">
body {
background-color: red;
}
#media screen and (max-width: 480px) {
body {
background-color: green;
}
}
#media screen and (min-width: 481px) and (max-width: 1023px) {
body {
background-color: brown;
}
}
#media screen and (min-width: 1023px) {
body {
background-color: blue;
}
}
</style>
<body>
<div class="color">
Some color
</div>
</body>
</html>
Although my requirements do not include iPad support, I do want to support it.
This has probably to do with max-scale, min-scale and initial-scale - try setting all of these to 1 and see if anything changes.
The downside is that iOS users won't be able to pinch to zoom in your page.
When you rotate the iPad it doesn't change the viewport, rather it scales the content. There is a good explanation from Allen Pike.