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.
Related
I have this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I have this CSS:
#media (max-width: 1100px) and (max-device-width: 1100px) {
.wrapper {
width: 200px;
}
.page {
width: 100%;
}
I have also tried the following css rules:
#media (max-width: 1100px) and (max-device-width: 1100px) {
and
#media only screen and (max-width : 767px) { .wrapper { width: 100%; } }
and
#media only screen and (min-width: 1024px) and (max-width: 1280px)
and
#media only screen and (min-width: 993px) and (max-width: 1024px)
None of these CSS rules work.
Its all being totally ignored on an iPhone.
But it works fine in a browser resized to iphone size.
Have a look for yourselves:
http://www.moonshineandfuggles.com/
Ive extended the max-width to ridiculous values to try and include iPhones.
I dont want the .wrapper to be 200px, I want it to be 100% and for it to take into account the width of the device.
It seems like the iPhone thinks it should make this page about 700ish pixels wide.
How can I make the iPhone realize I have made this site responsive so it adjusts to the correct size?
The following has some information you might find useful of media queries -
What is the difference between "screen" and "only screen" in media queries?
My first recommendation is that you design the flow of your CSS to work from your smallest supported resolution outwards, such as designing your CSS file to support mobile devices and then using media queries to deal with changing the properties in your CSS file to support larger resolution windows / devices.
The following link explains the benefits of this more clearly than I am ever likely to - http://unmatchedstyle.com/news/working-with-media-queries-and-min-width.php.
Using this design approach makes it easier to deal with questions of specificity, which can occur when you try to use a media query to override an already defined property. One handy way of avoiding such conflicts I obtained from Media Query Styles Not Overriding Original Styles - note Adrift's usage of body.
You do not need to use media queries to override a property if you are not going to actually change it - e.g. you do not need to specify the width of wrapper in your media queries since it has already been defined in the main body of your CSS file.
As for your problems regarding width, try setting the width of body (or, failing that, wrapper) to 100vw if you are having trouble with 100%.
I hope that the above is not too confusing.
If you have any questions, then please feel free to reply.
This is a really strange problem, because I have not come across any media query problems in many months, but this one has stumped me.
I have a simple min-width definition to show the user name in the header if there is sufficient width:
.userFullName {
#media screen and (min-width: 800px) {
display: inline-block;
}
}
Unfortunately, according to Chrome's ruler, the media query is only getting applied at 1000px. At 999px and below, it disappears... so it seems like it's 200 pixels off exactly.
I'd post images to show what I mean, but I don't have enough rep.
I am not understanding why it would do this. Any ideas? Thanks!
I think you have to write like this
#media screen and (min-width: 800px) {
.userFullName {display: inline-block;
}
}
Otherwise please check is there any other media-query that over-writing this.
I recently asked a question about resolution and how I can fix it in my ASP.NET web application.
With some of the answers I got I found that media queries was a good place to go.
I have set up my CSS document like the following:
#media only screen and (max-width: 640px) {
}
#media only screen and (min-width: 641px) and (max-width: 800px) {
}
#media only screen and (min-width: 801px) and (max-width: 1024px) {
}
#media only screen and (min-width: 1025px) {
}
I have been developing in 1600x800 and I am wondering how do I know what I need to change the sizes of the object to. Do I have to develop the application again in a smaller browser or is there an easier way to go.
HTML:
<link rel="stylesheet" type="text/css" href="Style/StyleSheet.css"/>
The approach is basically the same as when you are writing CSS without using media queries. You still have to deal with different window sizes.
Drag the window edge to make the browser smaller
Look at how the design holds up
Adjust the CSS
Refresh the page
You will need to change the sizes of your images and fonts and also change their positions based on the different screen sizes which you have set using the media queries. To check the different code you can resize your window and drag the border and see the effect if its working or not.
And also follow the steps which **#Quentin** has written it will help
this is not exactly the right approach to follow. you should start your website with a fluid css layout grid, google it a choose one that suits you. this is an example of a fluid grid: http://onepcssgrid.mattimling.com/.
When you set up everything and designed, stretch your browser and when the design "breaks", add a media query breakpoint. deciding your breakpoints before the development is not a good idea.
a good tool to test your design may be: http://bradfrostweb.com/demo/ish/?url=http%3A%2F%2Fwww.mediaqueri.es#random (enter your url in the top left box) but i usually prefer stretching my browser manually.
This is what I have done in my website and it is working fine:
<head>
<meta name="viewport" content="width=device-width">
<style>
#media screen and (max-width:1900px)
{
#content{
margin-left:251px;
margin-top: -197px;
}
}
#media screen and (min-width: 420px) and (max-width: 1000px) {
#sidebar {
margin-left: -30px;
}
#content{
margin-left:221px;
margin-top: -197px;
}
#separator
{
height: 50px;
}
}
</style>
</head>
I checked it by resizing my chrome window and then applied width accordingly. Hope it can help you.
CSS Media query are the best option to solve issue related to working with different size of browser and devices. you can check your application with different tools available that shows how your application look on different device and browser.
You can check by re-sizing your browser window or you can use browser extension to check your work
Google Chrome:
https://chrome.google.com/webstore/detail/responsive-web-design-tes/objclahbaimlfnbjdeobicmmlnbhamkg?hl=en
FireFox:
https://developer.mozilla.org/en/docs/Tools/Responsive_Design_View
Opera:
https://addons.opera.com/en/extensions/details/responsive-web-design-tester/?display=en
Safari:
http://www.midwinter-dg.com/downloads_safari-extension_responsive-resize.html
To learn more about css media queries visit: http://letsdopractice.com/css-media-queries/
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)
I want to add some style for the screen size between 1024px to 1280px, so I'm using following media query:
#media only screen and (min-width: 1024px) and (max-width: 1279px) {
My screen size is 1280px. The Firefox does not display any style added in the above query (and that's correct), but the Chrome browse on 1280px screen size displays the style added in the above media query.
Why Chrome on 1280px screen still displays the style added in the above media query? How can I fix the above query for Chrome too?
Thanks.
That is 6 years old but maybe help someone:
I was with this same problem, media queries working fine in edge and firefox but not in chrome.
The problem, in my case at least, was that I not put the viewport tag in head/html:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Now why the site was working in firefox/edge I don't know, actually make it harder to find the issue...
I'm really not sure why you're experience problems with your media query. Perhaps you're not styling it properly.
Obligatory JSFiddle here
body { background: red; }
#media only screen and (min-width: 1024px) and (max-width: 1279px) {
body { background: blue; }
}
I've tested it with Google Chrome on three different types of screen:
1. A width of less than 1024px
2. A width between the specified 1024px and 1279px
3. A width of more than 1279px