I'm adding media query into my asp.net webapp. I'm trying to make my webapp change and look different based on different type of mobile phone. I will show you the codes of my media query and the weird problem i received.
/*Media Query*/
#media only screen and (max-width: 1024px) {
#homebutton input[type=image] {
position:absolute;
left:0%;
top:0%;
margin: 0px;
height:1000px;
width:50%;
}
}
#media only screen and (max-width: 800px) {
#homebutton input[type=image] {
position:absolute;
left:50%;
top:0%;
margin: 0px;
height:70px;
width:50%;
}
}
Based on my understanding, whenever the browser has a size between 801px - 1024px, it will run the
#media only screen and (max-width: 1024px)
code. And when the browser has a size of 0px - 800px, it should run this line of css code
#media only screen and (max-width: 800px)
However, when i try to extend my browser width to 802px, the homebutton still show the size of the homebutton in media query css 800px instead of the 1024px. Why is it so? Is my code wrong by itself, or a misunderstanding of the media query logic on my part. I hope someone can help me on this.
Regards.
Try use 798px for 800px content width. You do not take into consideration the width of the scroll and border of browser.
Related
I am trying to use media queries to affix text to the bottom of a background image on a second page. When I edit the padding-top it affects the content on desktop mode, even if I adjust the media query to (max-width: 500px) and keep the desktop above 500px (which should then be outside the parameters of the media query, right?), but it has no bearing on mobile views. This is what I think the code should be, and it looks fine on desktop but leaves a large gap on mobile.
#media screen and (min-width: 500px) {}
.site-boxed-container .site-content {
max-width: 100%;
padding-top: 50%;
}
I also tried adding the following code to force mobile to have no top padding, but again it had no effect on mobile:
#media screen and (min-width: 250px) and (max-width: 499px)
.site-boxed-container .site-content{
padding-top: 0%;
}
Neither of the snippets of code you have shown are legal CSS.
The first:
#media screen and (min-width: 500px) {}
.site-boxed-container .site-content {
max-width: 100%;
padding-top: 50%;
}
does nothing. You have given the media query nothing to do - there is a matched pair of curly brackets immediately after the query. So everything will have the same padding-top.
The second:
#media screen and (min-width: 250px) and (max-width: 499px)
.site-boxed-container .site-content{
padding-top: 0%;
}
has a syntax error, there is no opening curly bracket immediately after the media query. Everything that pertains to a media query must come within curly brackets.
The correct syntax for this would be:
#media screen and (min-width: 250px) and (max-width: 499px) {
.site-boxed-container .site-content{
padding-top: 0%;
}
}
assuming you want to make padding top zero for viewports with widths between 250px and 499px.
I am struggling with a website regarding media queries. I have this code snippet as part of my menu
.flexnav.flexnav-show {
margin-top: 52px; } line 513 in my css
and with a media query set at #media all and (min-width: 800px) I have this code snippet for my tablet.
.flexnav.flexnav-show {
margin-top: 0px; } on line 638 in my css
However, when viewing the page on a tablet the margin-top is still set at 52px.
I have a similar issue with a another media query. I have this following code snippet
#media only screen and (min-width: 481px)
header hgroup {
top: 12%;
}
For my desktop I have the following:
#media only screen and (min-width: 769px)
header hgroup {
top:15%;
} at line 462
When on the desktop the top is still 12%
This is the link to the website.
Thanks
-Sohail
You need to use "max-width"
EXAMPLE:
/* DEFAULT */
.some-div{top:30%;}
/* RESPONSIVE */
#media screen and (max-width: 769px){
.some-div{ top:15%;}
}
#media screen and (max-width: 481px){
.some-div{ top: 12%;}
}
Sometimes you can use "!important" to rewrite the previous state in CSS but is not necessarily.
Website I've been working on just started ignoring all media queries. I can't seem to find the problem.
http://fnd.instinctdigitalmedia.com/
On the homepage the images under the 'Browse our Products" section shoud change based on screen width. at 320px, 480px, and 768px screen width it still shows the originals.
You must target the ancestor or parent to override what the previous query has done.
From 760px to override its style rule you should add call the parent #content of the img to override the rule in 760px
Example:
#content > img {width:25%;}
}
#media screen and (max-width : 480px){
#content > img {width:50%;}
}
#media screen and (max-width : 760px){
img {width:100%;}
}
There's a few issues I can see. Firstly, media queries aren't firing because:
There's a closing parenthese missing on line 899, flipping an error. To find this, I added my own media query showing something obvious, and pasted it at the top of the CSS, then further and further down until it stopped working.
Also, the mobile view failed because you are missing 'and' in your media query:
#media only screen (min-width: 320px) and (max-width: 480px) {}
It should be:
#media only screen and (min-width: 320px) and (max-width: 480px) {
As for the width break itself, a handy trick with responsive designs is to limit this kind of issue from ever occurring before you even start styling (this is a rough guide, not a comprehensive list):
img, video, object, iframe, fieldset, table, form, article, section, header, nav, footer {
max-width:100% !important;
}
Even when respecifying the widths of your images, you are still using pixel widths instead of a relative measurement like percentages. This means the images will stay a static size and won't resize correctly to the screen no matter what.
Lastly, you are using a 'bracketed' approach for your media queries. This means rather than allowing your existing CSS to cascade down your media queries, saving you having to specify things twice that aren't going to change, you must repeat the same code many times.
For example, you currently have:
#media only screen and (min-width: 768px) and (max-width: 1024px) {
.product-cat-1 {
position: relative;
display: block;
margin: 0 auto 10px auto;
width: 430px;
height: 150px;
background-image: url('http://localhost/firstnations/wp-content/uploads/2014/04/home-lighting.jpg');
}
}
Anything below 768px must be specified all over again. This leads to massive amounts of repeated code, and a lot of extra work for you. The simpler approach would be:
#media only screen and (max-width: 1024px) {
/* all styles for under 1024px */
}
Then for anything smaller:
#media only screen and (max-width: 768px) {
/* only styles that need to change when under 768px wide */
}
Okay, so I have a couple of media queries at different break-points in my design.
For example
#media all and (max-width:700px){
body{
background:red;
}
}
#media all and(max-width:560px){
body{
background:blue;
}
}
It works fine on my desktop, but when I go to view it on my LG android browser, only the first media query triggers.
It doesn't have anything to do with the widths, because if I change the max-width of the first query to something less than 560 it gets triggered anyway.
Any thoughts on this?
Remove the "all and"s:
http://jsfiddle.net/C3R9J/
#media (max-width:700px){
body{
background:red;
}
}
#media (max-width:560px){
body{
background:blue;
}
}
Take a look at Example 5 this link to WC3:
http://www.w3.org/TR/css3-mediaqueries/
if the media type is not explicitly given it is ‘all’.
You can try with min-width. What it does: device width from 320px to 559px, device width from 560px to 699px, device width from 700px to XXX. The latest media type will overwrite all others media type.
#media only screen and (min-width: 320px) {
body { background:red; }
}
#media only screen and (min-width: 560px) {
body { background:blue; }
}
#media only screen and (min-width: 700px) {
body { background:green; }
}
My CSS that uses media queries doesn't detect devices correctly...
My code:
#media screen and (min-width: 240px) and (max-width: 320px) {
#test{
width:50px;
height:50px;
background-color:blue;
}
}
#media screen and (min-width: 640px) {
#test{
width:50px;
height:50px;
background-color:red;
}
}
I want the div to be blue on a small phone like HTC wildfire and red on a tablet like iPad Mini.
Extending from comment:
Browsers on small devices tend to scale web pages a little bit. To get the "real" dimension for media queries, add
<meta name="viewport" content="initial-scale=1.0" />
to the head of your document.
To inspect the "rendered" dimension, use something like this:
<script type="text/javascript">
window.addEventListener("load",function(){
var box=document.body.getBoundingClientRect();
document.getElementById("whatever").value=box.width+" x "+box.height;
},false);
</script>
This may or may not prevent the scale setting of the browser itself, but will at least prevent the "auto" scaling.
In my own experience, some situations, like a <p> with long sentence, will likely causes browsers to scale down to make it more feel like "a sentence". By specifying initial-scale=1.0, Opera Mobile still scale to its setting (by default 125%), but no more than that, and the long sentence will wrap.
Try it with adding screen to the query.
#media screen and (min-width: 240px) {
#test{
width:50px;
height:50px;
background-color:blue;
}
}
#media screen and (min-width: 640px) {
#test{
width:50px;
height:50px;
background-color:red;
}
}