I am testing my code on different browsers. I see that Safari (version 9 on Mac) absolutely ignoring media query on orientation portrait.
This is a code:
#media print and (orientation:landscape) and (-webkit-min-device-pixel-ratio:0){
// Hide the default headers and footers that the browser adds
.no-print-portrait {
display: block;
}
.portrait-notification {
display:none;
}
}
// If the orientation is in portrait it hides all html and displays a notification to the user to switch to landscape
#media print and (orientation:portrait) and (-webkit-min-device-pixel-ratio:0){
// Hide the default headers and footers that the browser adds
#page {
margin: 0;
}
.no-print-portrait {
display: none;
}
.portrait-notification {
display: block !important;
font-size: 24px;
padding-left: 8px;
padding-top: 20px;
text-align: center;
}
}
Does somebody has idea why?
Many thanks!
Safari doesn't support that due to the documentation
http://caniuse.com/#search=print
and/or
https://developer.mozilla.org/en-US/docs/Web/CSS/#page
Related
When i make the responsive of my web-site,
some media query works but the last ones don't.
/* work */
#media screen and (max-width: 1030px){
.section2 .content-card .title-card img {
max-width: 200px;
}
.section1 {
height: 1000px;
}
}
/* doesn't work */
#media screen and (max-width: 1030px){
.section2 {
padding-top: 15vh;
}
}
#media screen and (max-width: 260px){
.section2 {
padding-top: 6vh;
}
.section1 {
padding-top: 3vh;
}
}
In my code there are many more media queries but I had to remove them because of the code limits on the question.
Is there a limit to the number of media queries per file?
See attached picture. This shows that it is working.
In fact to do the responsive, I use the responsive mode with the devtools
is that why its not workingscreen shoot
There are several other posts asking for a similar solution, but I haven't been able to get any of the posted answers to work for us. We need to target Safari on iPhone and iPad
/* Safari 7.1+ */
#media only screen and (max-device-width: 768px),
only screen and (-webkit-min-device-pixel-ratio:0) {
.hero-section {
sa-search-nav ion-row {
background: none;
}
.search-form {
ion-col.select {
margin-top: 0px;
margin-left: 0px;
}
}
}
form.search-form {
min-height: 300px;
}
}
No magic here, CSS media queries are not too powerful yet, to accomplish what you want. Any device that has a maximum width of 768px will obey the same CSS rule.
I think what you need here is a hack:
#media only screen and (max-device-width: 768px),
only screen and (-webkit-min-device-pixel-ratio: 0) {
// Safari 6.2,7.1+
_::-webkit-full-page-media, _:future, :root {
.hero-section {
sa-search-nav ion-row {
background: none;
}
.search-form {
ion-col.select {
margin-top: 0px;
margin-left: 0px;
}
}
}
form.search-form {
min-height: 300px;
}
}
}
Even this, however, will not ensure that this code will only run on mobile devices. Note that the above code is SCSS, not CSS. I believe yours, was too. Please give it a try and let me know. Courtesy of Jeff Clayton.
#wrap {
background: white;
margin: 20px 15px;
padding: 10px;
}
#media screen and (max-width: 600px) {
#wrap {
margin: 0;
padding: 0
}
}
These styles seems to be working if I open new browser window and try to resize it. But if I refresh windows once then #media does not work. Then I need to close the browser and open it againe to open the same site to re-enable #media styles. What is going on here?
#media only screen and (max-width: 600px) {
#wrap {
margin: 0;
padding: 0
}
}
I find it works best when you have the word "ONLY" in the media query. Heres an example of the bootstrap media queries.
https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries
If that doesnt work try a hard refresh to clear your browser cache.
I have some list items set to min-height: 12em - for desktop
When sizing down for tablet / mobile screens I want to reset this to: min-height: auto
However iPad / iPhone is ignoring this and maintains the 12em
I've also set height: auto
Use the following code:
/* Desktop */
.listings.default li {
min-height: 12em;
}
/* Between Desktop and Tablet */
#media only screen and (max-width: 1200px) and (min-width: 768px) {
.listings.default li {
display: list-item;
min-height: inherit;
}
}
So use inherit instead of auto
I tested this on my iPhone but with another media query..
Check this post to see some of the media queries for standard devices..
I have this CSS:
#media only screen and (max-height: 500px) {
body{
display: none;
}
}
This hides the page when it gets to 500px (just to test it), works fine in my browsers on windows PC, when I try on my MacBook Pro in Safari it doesn't seem to detect it, how can I get this to work properly? I cant find much on it on google
I tested it and it's working fine on Safari(Mac) as well.
div{
background: #ddd;
width: 300px;
height: 300px;
}
#media only screen and (max-height: 500px) {
div{
display: none;
}
}
Here's the screenshot. Though there's a bug with Safari(iPad/iPhone). You might love to read this.
That works in safari, I just tested it to make sure.
The only thing that is missing in your question is the position of that query in regards to the properties/class you would like to change.
In other words, place it at the end and it will work.
Example:
This tells the browser to hide the body when the browser height is smaller than 500px:
body {
display: block;
}
#media only screen and (max-height: 500px) {
body{
display: none;
}
}
If you had it the other way around the last body definition would make the media query useless.
#media only screen and (max-height: 500px) {
body{
display: none;
}
}
body {
display: block;
}