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.
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
My page here: https://webtan.jp/
I hide this section:
#top__fullcarousel {
display: none;
}
but after hiding it, the following part (the siteContent block) didn't fit (
the error here)
I fixed the padding and it's only working with viewport(min width 1200px), not working rightly with other viewports (mobile, ipad...)
.siteContent {
padding-top: 129px;
}
How can I responsive it in this case?
You can explicitly set padding that you need for each by each device width:
#media screen and (max-width: 1000px) {
.siteContent {
padding-top: 129px;
}
}
#media screen and (max-width: 850px) {
.siteContent {
padding-top: 109px;
}
}
#media screen and (max-width: 600px) {
.siteContent {
padding-top: 89px;
}
}
#media screen and (max-width: 320px) {
.siteContent {
padding-top: 69px;
}
}
Of course you can use a lot of another methods, but this one is most ease way.
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
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;
}
totally new to media queries and responsive design and I've fallen at the first hurdle.
I have the following:
#media only screen and (max-width: 100px) {
#wrap {
background: #F00;
}
}
#media only screen and (max-width: 500px) {
#wrap {
background: #224466;
}
}
And only the max-width: 500px works in that as I reduce the screen down it changes to the first colour, but as I reduce it further down to below 100px nothing else happens.
Where have I failed?
thanks
SOLUTION:
For anyone else with the same issue, here is the answer as provided by Sean Vieira.
The cascade still applies to active media queries so swapping them around resolves the issue) I also increased it from 100px as suggested by Roy Stanfield as the desktop browser might not go that small.
#media only screen and (max-width: 800px) {
#wrap {
background: #224466;
}
.entry-title {
font-size: 2em;
}
}
#media only screen and (max-width: 400px) {
#wrap {
background: #F00;
}
.entry-title {
font-size: 1em;
}
}
The cascade still applies to active media queries (if I understand it correctly). If you look at what you wrote without the media queries, the problem becomes more evident:
#wrap {
background: #F00;
}
#wrap {
background: #224466;
}
Switching the order should fix the problem:
#media only screen and (max-width: 500px) {
#wrap {
background: #224466;
}
}
#media only screen and (max-width: 100px) {
#wrap {
background: #F00;
}
}
If you are using a normal desktop browser you may not be able to make it smaller than 100px. Try increasing your test widths to larger sizes like 500px and 1000px.
This is because of the ordering in the media queries in CSS.
Either change the order or
Try to put !important over
Use this one http://jsfiddle.net/fidrizers/8Pmuw/
Try using min-width in one of your queries, so it becomes:
#media only screen and (max-width: 100px) {
#wrap {
background: #F00;
}
}
#media only screen and (min-width: 101px) and (max-width: 500px) {
#wrap {
background: #224466;
}
}