I have written this media query for Macbook Pro. It is not accepting the media query. My Macbook's resolution is 1280x800 13 inches
#media only screen
and (min-device-width : 1280px)
and (max-device-width : 800px)
{
.col-md-12.webtestingsocial
{
margin-left: 29px !important;
}
}
It should work this way:
#media screen and (min-width: 800px) and (max-width: 1200px) {
/* Your Styles */
}
Also make sure you have this tag inside the HEAD
<meta name="viewport" content="width=device-width, initial-scale=1">
I think it's because making your min-device-width value higher than your max-device-width makes it invalid.
Have you tried making the min-device-width 800px and max-device-width 1200px?
Media Query for macbook 13 inches(1280*800)
#media screen and (min-width: 800px) and (max-width: 1281px)
{
//write your styles here
}
Related
/*iphone 6/7/8 plus*/
#media screen
and (min-width : 414px)
and (max-width : 736px)
and (-webkit-device-pixel-ratio : 3)
and (orientation: portrait)
{
#x-section-1 {
margin-top: 274px!important;
}
}
/*iphone x*/
#media screen
and (min-width : 375px)
and (max-width : 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait)
{
#x-section-1 {
margin-top: 237px!important;
}
}
The above is my media query.
Using google dev tools for responsive testing. When I used iPhone X to test, it displayed correctly with the margin-top is 237px!important.
But when I used iPhone 6/7/8 plus to test, the margin-top value was still reference to iPhone X's margin-top value.
How can I fix it?
This is because your second media query also matches old iPhones. It says that it is applied whenever screen width it between 375px & 812px, and 414 to 736px are in this range also.
To adapt for the iPhone notch you shouldn't use these media queries and instead use some special CSS for this case, as advised by Webkit developers in their article.
Your code will look something like this:
#x-section-1 {
margin-top: 274px!important;
}
#supports(padding: max(0px)) {
#x-section-1 {
margin-top: max(237px, env(safe-area-inset-top)) !important;
}
}
And you also need to have viewport-fit=cover in your viewport meta tag for that to work.
Make sure you have the viewport meta tag in your HTML head:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Then instead of using max-width / min-width, trying using device-width :
UPDATED CODE:
/* iphone X */
#media only screen and (min-width: 812px) { }
/* iphone 6+, 6s+, 7+, 8+ */
#media only screen and (min-width: 736px) { }
This is my media query for resolution with width of 1280 pixels:
#media (min-width: 1270px) and (max-width: 1280px)
When I want to use seperate query for height like this:
#media (min-width: 1270px) and (max-height: 960px)
It doesn't work. It's not showing even in the developer tools in chrome. Can I get some suggestions?
you need to add a comma between different conditions (width/height)
#media screen and (min-width: 1270px), screen and (max-height: 960px )
https://jsfiddle.net/ahmadabdul3/fxaknLn7/
You must add this code at first
<meta name="viewport" content="width=device-width" />
and use this link
https://css-tricks.com/logic-in-media-queries/
#media screen and (max-width: 995px) , screen and (max-height: 700px) {
...
}
I need to set my site on desktop (1024 * 768) and ipad, but I can not separate his Vizualization.
I'm using in Ipad:
# media only screen and (min-device-width: 768px) and (max-device-width : 1010px)
and desktop:
# media (min-width: 1020px)
its Works in Firefox, but not Chrome.
Rather than trying to target specific devices, it's arguably better to set appropriate breakpoints specific to your layout. That is, gradually narrow your browser and observe the points at which this particular design needs to reflow. Then set styles that apply to those points, and let each device receive whatever layout works best within its dimensions.
So, in the head of your page, I recommend you place this:
<meta name="viewport" content="width=device-width">
and then in your style sheet, use something like this (the numbers are arbitrary):
/* default styles, perhaps for basic mobiles and older browsers */
/* end default styles */
#media only screen and (min-width: 1025px) { }
#media only screen and (min-width: 701px) and (max-width: 1024px) { }
#media only screen and (max-width: 700px) { }
#media only screen and (min-width: 320px) and (max-width: 480px) { }
There are so many combinations of this that the above is just a rough example. You don't always need max and/or min. It depends on the layout.
There's also an argument for using ems instead of px, but I won't go there for now. :)
Why not just cascade down?
#media screen and (max-width : 1024px){ /*Styles*/ }
#media screen and (max-device-width : 768px){ /*Styles*/ }
1024x768 is iPad size anyway.
I have developed an app with iPhone as design target (i.e. 640x960 => 2:3) and I have done so using percentages for each division in layout so the ui streches itself with respect to device size. Now this works fine with iPad but I am having problems with 9:16 aspect ration devices. I have used Media Queries for the purpose but that isn't working.
The default code for division is:
.top_bar {
height: 9%;
}
Now using Media Queries aspect ratio:
#media screen and (min-device-aspect-ratio: 9/16) {
.top_bar {
height: 7.5%;
}
}
But this is not working, not on browser and not on device.
I have added viewport metatag content value as
content="user-scalable=no, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, target-densityDpi=device-dpi"
Later I tried multiple resolutions to detect aspect ratio as:
#media
only screen and (min-device-width: 320px) and (min-device-height: 560px),
only screen and (min-device-width: 480px) and (min-device-height: 850px),
only screen and (min-device-width: 640px) and (min-device-height: 1130px),
only screen and (min-device-width: 720px) and (min-device-height: 1270px),
only screen and (min-device-width: 768px) and (min-device-height: 1360px),
only screen and (min-device-width: 800px) and (min-device-height: 1422px),
only screen and (min-device-width: 960px) and (min-device-height: 1700px),
only screen and (min-device-width: 1080px) and (min-device-height: 1910px)
{
.top_bar {
height: 7.5%;
}
}
But this isn't working either.
UPDATE - FIXED
Experiment a little and just changed min-device-aspect-ratio: 9/16 to max-aspect-ratio: 9/16
and its working fine now.
#media screen and (max-aspect-ratio: 9/16) {
.top_bar {
height: 7.5%;
}
}
put Your meta tag like this
<meta name="viewport" content="width=device-width, initial-scale=1">
And write Your Media queries
#media only screen and (min-width: 768px) and (max-width: 956px){
.top_bar { height: 7.5%;}
}
I have this #media setup:
HTML:
<head>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
CSS:
#media screen and (min-width: 769px) {
/* STYLES HERE */
}
#media screen and (min-device-width: 481px) and (max-device-width: 768px) {
/* STYLES HERE */
}
#media only screen and (max-device-width: 480px) {
/* STYLES HERE */
}
With this setup it works on the iPhone but it does not work in the browser.
Is it because I already have device in the meta, and maybe have max-width:480px instead?
I've found the best method is to write your default CSS for the older browsers, as older browsers (including IE 5.5, 6, 7 and 8) can't read #media. When I use #media, I use it like this:
<style type="text/css">
/* default styles here for older browsers.
I tend to go for a 600px - 960px width max but using percentages
*/
#media only screen and (min-width: 960px) {
/* styles for browsers larger than 960px; */
}
#media only screen and (min-width: 1440px) {
/* styles for browsers larger than 1440px; */
}
#media only screen and (min-width: 2000px) {
/* for sumo sized (mac) screens */
}
#media only screen and (max-device-width: 480px) {
/* styles for mobile browsers smaller than 480px; (iPhone) */
}
#media only screen and (device-width: 768px) {
/* default iPad screens */
}
/* different techniques for iPad screening */
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* For portrait layouts only */
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */
}
</style>
But you can do whatever you like with your #media. This is just an example of what I've found best for me when building styles for all browsers.
iPad CSS specifications.
Also! If you're looking for printability you can use #media print{}.
The underlying issue is using max-device-width vs plain old max-width.
Using the "device" keyword targets physical dimension of the screen, not the width of the browser window.
For example:
#media only screen and (max-device-width: 480px) {
/* STYLES HERE for DEVICES with physical max-screen width of 480px */
}
Versus
#media only screen and (max-width: 480px) {
/* STYLES HERE for BROWSER WINDOWS with a max-width of 480px.
This will work on desktops when the window is narrowed. */
}
If website on small devices behavior like desktop screen then you have to put this meta tag into header before
<meta name="viewport" content="width=device-width, initial-scale=1">
For media queries you can set this as
this will cover your all mobile/cellphone widths
#media only screen and (min-width: 200px) and (max-width: 767px) {
//Put your CSS here for 200px to 767px width devices (cover all width between 200px to 767px //
}
For iPad and iPad pro you have to use
#media only screen and (min-width: 768px) and (max-width: 1024px) {
//Put your CSS here for 768px to 1024px width devices(covers all width between 768px to 1024px //
}
If you want to add css for Landscape mode you can add this
and (orientation : landscape)
#media only screen and (min-width: 200px) and (max-width: 767px) and (orientation : portrait) {
//Put your CSS here for 200px to 767px width devices (cover all mobile portrait width //
}
The correct value for the content attribute should include initial-scale instead:
<meta name="viewport" content="width=device-width, initial-scale=1">
^^^^^^^^^^^^^^^
If you want to include both min and max width for responsiveness in the browser, then you can use the following:
#media (min-width: 768px) and (max-width: 992px){...}
#media (min-width: 480px) and (max-width: 767px) {...}
for some iPhone you have to put your viewport like this
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, user-scalable=0" />