I want to add media query to specific device ipad pro of size 1366*1024 height width and height.How do i add media query to to that size targeting only that width and height.Not less than 1366 or greater than 1366 !!!
Copy pasted from here
#media (min-height: 1024px) and (min-width: 1366px) {
/* CSS stuff */
}
Don't forget <meta name="viewport" content="width=device-width, initial-scale=1.0"> meta tag on header too.
#media only screen
and (min-device-width : 1024px)
and (max-device-width : 1366px) { /* STYLES GO HERE */}
Reference link
#media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 1.5) {
//code
}
You can also specify if you want to set over portrait or landscape:
/* Portrait */
#media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1.5) {
//code
}
/* Landscape */
#media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1.5) {
//code
}
Related
I have added this CSS media setting for changing the font size of a web page when it comes to iPhone sizes:
body{
font-size:10pt;
}
#media only screen and (max-width: 375px) {
body{
font-size:20pt;
}
}
But when I resize it, it does not show the font size of 20pt.
I have also added this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
So what's going wrong here?
How can I properly add the CSS media queries for iPhone sizes with a maximum width of 375px?
Thanks in advance.
its depend in which model you are testing.
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Portrait */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/* ----------- iPhone X ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Portrait */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
}
i have make a sence and it works only for ipad-pro (1366*1024) landscape. It dont disturb my 1366*768 device viewport. let me show the code below:
#media only screen
and (min-device-width: 1025px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape){selector{
background-size: 100% 75% !important;
background-position: center top 188px!important;
background-repeat:no-repeat;background-attachment: fixed;
}
}
now i need another media query which can work only for 1366*768. i edit the upper one for 1366*768 but it cant work. I think i help you make understand what i actually want: please help somebody!
/* ----------- iPad Pro ----------- */
/* Portrait and Landscape */
#media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Portrait */
#media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Landscape */
#media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
Try this and check.I don't have an iPad Pro but this works for me in the Chrome simulator.
Should I use landscape and portrait together like
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}
OR separate like
#media only screen and (min-width : 321px) {} for landscape
#media only screen and (max-width : 320px) {} for portrait
Or all together? Whats the difference here?
The top query will only target screen widths between 320px and 480px.
#media only screen and (min-width : 321px) {} will target anything wider than 321px.
#media only screen and (max-width : 320px) {} will target anything smaller than 320px.
You could add something like #media only screen and (min-width: 320px) and (orientation: landscape) {} which will only return true if the device is 320px or wider and in landscape.
(orientation: portrait) is also allowed in media queries.
You can do them together if you put the orientation with the media query
#media only screen and (max-device-width: 320px) and (orientation: landscape),
#media only screen and (max-device-width: 480px) and (orientation: portrait) {
/* styles here */
}
I am trying to implement some basic css media queries into my web app. No matter how I order the queries in the CSS document it will always use the last query.
My CSS is layout out
basic styles{
...
}
#mediaqueries{
styles{
...
}
}
I dont know if its an ordering issue but no matter how large I make the brower or testing device it will always the last query in the document.
Media Queries:
Regular CSS{
...
}
#media screen and (orientation : landscape) {
//changes background image for devices
}
#media screen and (orientation : portrait) {
//changes background image for devices
}
#media screen and (min-device-width: 240px) and (max-device-width: 320px) {
...
}
#media screen and (min-device-width: 320px) and (max-device-width: 480px) {
...
}
#media screen and (min-device-width: 480px) and (max-device-width: 640px) {
...
}
#media screen and (min-device-width: 640px) and (max-device-width: 800px) {
...
}
And So on
Meta tag
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
Things I have tried
#media only screen and (min-device-width: 640px) and (max-device-width: 800px)
instead of
#media screen and (min-device-width: 640px) and (max-device-width: 800px)
And
#media all and (min-device-width: 640px) and (max-device-width: 800px)
instead of
#media screen and (min-device-width: 640px) and (max-device-width: 800px)
Any ideas? My css is 1026 lines so not practical to paste the whole document sorry
When ordering the media queries, you should make sure the max-width properties go down from the highest value, so it should be just the opposite from your provided code.
The way I usually tend to deal with Media Queries is following:
#media (min-height: 992px)
{
*css here*
}
#media (max-width: 991px)
{
*css here*
}
#media (max-width: 768px)
{
*css here*
}
#media (max-width: 499px)
{
*css here*
}
And don't get me wrong, you can combine both min and max values and it is totally correct.
I am facing one very strange issue in bootstrap, basically I have this page http://excellencewebworks.com/bootstrap/video_skin.html
Here I am adding video covered with a tablet video skin. When I check the page under responsive mode in Mozilla Firefox -> Tools-> Responsive Design View for 360 x 640 dimension it works good under portrait and landscape mode.
But when checking the same page in physical device, it works only in portrait and not landscape, design gets altered in landscape mode. Strange to see this.
Can anyone please look into this and let me know what I am doing wrong here?
Thanks,
Ronak Shah
Here is code for landscape and portrait mode media queries try this.
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 5 and 5S ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6 ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6+ ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Portrait */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
}
Ok, Give it a try something like this :
#media screen and (min-width:360px) and (max-width:640px){
/*-----style----*/
}
Also make sure your media queries are not overlapping.