I started by making the desktop version then went to create the ipad pro version at 1024 pixels.
so I set:
#media only screen and (max-width1024px) {
}
and started to make my changes. Once the changes were made I went on to creat the iphone version at 375px
#media only screen and (max-width375px) {
}
However when I create changes on the 375px it affects the 1024px version. Every size is affecting the others with the exception of the original desktop version. I fix one version to my liking, but when I go to work on another version it changes what i previously worked on. What am I doing wrong?
Try like this.
#media screen and (max-width: 1024px) and (min-width: 375px) {}
#media screen and (max-width: 375px) {}
Related
I've been using media queries to target tablets and down just by writing:
#media only screen and (max-width: 1199px) { ... }
However, I came across a tablet this weekend whose resolution were even bigger than that, triggering a menu it wasn't supposed to see. Normally, I don't care since I use these queries to trigger design changes that normally looks good in that resolution but in this particular case, it's not good since a hover based menu showed up that's obviously really hard to use on a tablet.
So I've been tinkering a bit with writing a media query that triggers on EITHER max-width or both of the orientations, like this:
#media handheld, (max-device-width: 1300px), (orientation: landscape), (orientation: portrait) { ... }
However, this seems to trigger on my computer as well and I don't understand why. Anyone know why, or has a better solution to my problem?
It's because you are using , instead of and in you media query condition .
For example:
#media handheld and (max-device-width: 1300px) and (orientation : landscape) {
.div {....}
}
#media screen (max-width: 449px), handheld and (orientation:landscape) { ... }
Try this one.
I'm using Windows 10, Codeigniter, jQuery and Firefox 43.0.4 although I can't see why that would affect this issue. I want to apply styles to an iPad size window so I'm using this media query:
#media only screen
and (min-device-width: 768px)
and (max-width: 1024px)
{
*{color:#ff0000 !important;}
}
as a test that should turn all text red but it's not working in Firefox 43.0.4 (or Chrome etc). I'm also using the Web Developer extension to set the portal to the correct size. I've used the head section metatag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Probably obvious but I can't see it and I've used media queries before. This is driving me nuts and I would be grateful for any suggestions as to where I'm going wrong.
I believe you are missing the device prefix, the CSS should be:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* STYLES GO HERE */}
You can read more information on Stephen Gilbert's site.
You dont have to use min-device-width, just use min-width
#media screen and (min-width:768px) and (max-width:1024px) {}
Try something like this:
#media only screen
and (max-width: 480px),(min-device-width: 768px)
and (max-device-width: 1024px)
I appear to have fixed the problem by using Mathew Riches code above and the reason I didn't recognize this earlier is that, for me, it doesn't work in a resized firefox browser window which has been my testbed of choice. To use the resized browser I need to use:
#media only screen
and (min-width : 768px)
and (max-width : 1024px) { /* STYLES GO HERE */}
but that doesn't work on my iPad 4. And inciddentally any use of:
and (-webkit-min-device-pixel-ratio: 2)
with a pixel ratio of 1 or 2 killed the response on my iPad 4.
So the only way to test has been to upload every change in CSS and check on the iPad itself which is pretty irritating as I normally use my local server for all development.
I then discovered a problem with full-screen background images on the iPad but that is another story...
Many thanks to all contributors for your thoughts and for my purposes I now regard this query as solved.
I have used the media queries for different width.I have used 3 Style sheets for mobile, tab and desktop views as follows:-
For Mobile View:-
#media only screen and (min-width : 120px) and (max-width : 640px) { }
For Tab View:-
#media only screen and (min-width : 640px)and (max-width : 980px){ }
For Desktop View:-
#media only screen and (min-width : 980px) { }
When I am re sizing my browser then it is showing the adaptive view but while checking in mobile device the web page is still showing the browser view.
The responsive view is also not adaptive while checking in the Device Emulator functionality of the google chrome browser.
However the side menu bar used for mobile view is still visible in the mobile view as expected but the remaining site is not adapting the width and height accordingly.
Can anyone explain the issue and reason behind it.
P.S. : I am restricted to media queries not able to use Bootstrap or any other framework for making my site responsive.
Here we go. As per your media queries, browser is not sure what layout should be adapted because you have defined the same width as break point.
What you need to do is define media queries like this.
For Mobile View:-
#media only screen and (min-width : 120px) and (max-width : 639px) { }
For Tab View:-
#media only screen and (min-width : 640px)and (max-width : 979px){ }
For Desktop View:-
#media only screen and (min-width : 980px) { }
Hope this help you.! Do come back if still having issue.!
Try to remove only screen and and leave it like #media (min-width : ...
these attributes is not required.
If it works but you really want to use screen and just remove the only keyword. From specs:
The keyword ‘only’ can also be used to hide style sheets from older
user agents. User agents must process media queries starting with
‘only’ as if the ‘only’ keyword was not present.
If at least something from #media section is working for your mobile device make sure that ALL your #media sections placed at the bottom of your CSS file and that this file are linked to you html the latest among all other CSS files. If it still doesn't work for you as expected check your actual CSS code or make a demo for us. How to make Minimal, Complete, and Verifiable example
PS.: You don't have to specify min-width for the smallest screen in the list of #media
I have one rule for media queries
#media only screen and (min-width: 768px) and (max-width: 1080px) {
I know 1080 is a weird number this was just for test...
That being said, when I resize my page, the background color (what I'm using to test the visualization of the breakpoint) changes when the width of the page is 1190px.
What is the reason this is happening, and how can I fix it?
Thanks
Update has anyone else heard of this happening? I'm using Semanitc UI, not sure if that has anything to do with this issue, I still haven't resolved it.
Try this
#media (min-width: 768px) and (max-width: 1190px) {
your CSS
}
I am having a strange problem with my media queries. They seem to be working just fine on my mobile devices, but when I resize my desktop browser the changes are not applied. This makes using web inspector/firebug impossible to inspect my mobile styles. Here is my media query:
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {}
You are calling device specific queries. If you want to test on browser window resize, you need to remove -device- from both min and max calls.
#media only screen
and (min-width: 320px)
and (max-width: 480px) {}