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
}
Related
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) {}
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've set up a test with media queries to work like so:
#media only screen and (min-width: 650px) and (max-width: 700px) {
#global-wrapper-cp-fefc4ea514a255df2244eaccdabbb262 * {
background: red !important;
}
}
However, the CSS is effective from 666px to 716px:
My browser is at 100% zoom, so it cannot be this. I am using Chrome extension "Browser Width".
I'm hoping this is something simple that will leave me red faced. Can anybody offer any advice? Thank you.
You have to test it inside responsive view section, currently it's showing 17px scroll-bar. After excluding this width, your media query will work.
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 am attempting to change to top margin on a div according to the browser width.. using one query along with the main css worked but when I added another set of screen widths/correlating styles they did not respond. What is the best way to have multiple device widths say if I wanted to have 4 or 5 different margin tops as the screen adjusts.
the code below is an example of what I tried and I am not too sure what I am doing wrong... All help is greatly appreciated.
#media screen and (min-width: 1px) and (max-width: 410px){
.inner-cont{margin-top:130px;}}
#media screen and (min-width:411px) and(max-width: 1000px){
.inner-cont{margin-top:50px;}}
I am new to this but am learning alot and am very appreciative to all on this site for all the help. Thanks alot guys!
You don't have a space here, and thus your media query fails
and(max-width: 1000px)
--^--
Demo (Resize the fiddle window to see the effect)
Also, am not having the markup, so if you are trying to apply margin-top:130px; on an inline element, it will simply fail, also, inheritance matters, order of the media query matters too, but as far as the question goes with the provided code, only issue I can see was the missing space..
you are missing only keyword but
your media-query works, see here
for eg
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
see examples here
see demo here (change browser width to understand)