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.
Related
My main smartphone is a Galaxy S8 Plus.
The media queries for this device are:
#media only screen and (min-width: 360px) and (orientation: portrait)
Let's start with the portrait orientation. This one, I'm understanding 100%, but here comes the problem.
This is the media query for landscape:
#media only screen and (min-width: 740px) and (orientation: landscape)
Everytime I code in this media query it applies to my desktop which has a 1920 * 1200 resolution. I know it's influenced by the min-width: 740px.
Now, my question is are:
How do I tackle this problem?
Can I create a single query that covers both portrait and landscape?
If so , what are the best practices for units in responsive web design? Right now I'm using vh and vw in my project, but I think it creates a mess sometimes.
And one last question: how do I cover most devices out there with a minimal use of queries?
Good CSS is minimal. Test my approach:
Global styles on top. For example font colors, font weights, backgrounds etc.
Then, use media queries:
#media screen and (max-width:1200px){
}
#media screen and (max-width:992px){
}
#media screen and (max-width:640px){
}
and so on... Higher widths are on top. In "mobile-first" approach, use min-width, and then lower widths are on top.
Try to avoid orientation property. Use this property only when you really need it.
vw and vh are convenient but remember that they are not supported on older browsers.
Bootstrap is good framework but you should learn how to make logic CSS from the scratch first. Keep up the good work.
To deal with the problem that it applies to desktop change min to max, there is a "standard" for what the media queries should be seen here, your media query described the medium size of < 768px for horizontal and very small size of < 576px
You don't need to include the orientation, you can simply write #media only screen and (min-width: 740px) then you apply for both, but you should have two media queries to make sure you cover both
vh and vw work best for creating responsive design, however if you are coding for IE then it might a problem, and you will need to find an alternativ to calculating height
Use Boostrap, it does everything for you almost
I am facing a situation where for one of my classes, the #media query is just not being read, instead, the case where the class is not wrapped around #media query is being read even though the #media criteria is being met.
This is the code:
#media (min-width: 768px){
.buttonClass{
position: absolute;
width: 25%;
}
}
and the class not wrapped in #media:
.buttonClass{
position: absolute;
width: 50%;
}
I know I can solve this problem by specifying an #media query for both the classes with the appropriate resolution, but I just wanted to know why the #media query for screen sizes with widths larger than 768px was not being read.
In another case where I have 2 classes that modify the body and head tags, one of the them is wrapped in #media (width 768px or greater) and the other is not wrapped around anything. So basically it is exactly the same as the one above, expect it involves head/body tags. This seems to work as expected which is what is confusing me.
What do I do when faced with this situation?
Any help would be really appreciated.
#media screen and (min-width: 768px) {
.buttonClass{
position: absolute;
width: 25%;
}
}
Only executes when the viewport is 768px wide or wider, so even if the viewport is 2000px, this code still executes.
If you change the query:
#media screen and (max-width: 1000px) and (min-width: 768px)
This exectues when the browser's width is between from 768 to 1000px.
Are you thinking the opposite?
When none of the #media conditions are met, then css without #media executes:
.buttonClass{
position: absolute;
width: 25%;
}
And btw, i don't know if its just me, but it is very hard to understand your logic....mainly
but I just wanted to know why the #media query for screen sizes with
widths larger than 768px was being read even though the screen size is
larger.
Isn't this suppose to happen?
There are two possible reasons I can think of:
1.) wrong filepath when referencing the CSS file - but that would only apply if you are using more than one CSS file, or one file and the other CSS in a 'style' tag in the header of the HTML page.
2.) The reversed order of the two rules: The media query rule has to be read after the general rule, otherwise the general rule will override the MQ rule since it applies to everything. So if they are both in the same file, the MQ has to be below the general rule, if they are in two sperately referenced files, the file with the MQ has to be referenced after the one with the general rule/s.
All,
I am trying to develop a responsive site, but for some reason the media query I use for the ipad/tablet is also effecting the iphone/mobile. Are my dimensions wrong?
What is the best way to target all three device types?
Thanks
/desktop/
#media (min-width:1100px)
/ipad/
#media screen and (max-width: 1115px)
/iphone/
#media screen and (max-width: 767px)
This is a common problem in responsive design and there are many approaches that try to solve it. I myself find a 4-breakpoint layout to be the most fitting for most of the situations.
Phone: default
Phone-Landscape: min-width 480px;
Tablet: min-width 768px
Tablet-Landscape: min-width 1024px
Desktop: min-width 1260px
Think of min-width as meaning greater than or equal to and think of max-width as meaning less than or equal to.
By that logic your iPad rules (less than or equal than 1115px) are also going to affect the iPhone since it's screen is less than 1115px.
It sounds like you want to use an AND on your ipad rule to make it only affect rules that are bigger than your iphone rule set. Something like:
#media screen and (max-width: 1115px) and (min-width: 768px)
See https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries for more information
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 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