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;
}
Related
I'm sorry i know it's been asked before but i just can't figure why it doesn't work!
I have the meta tag viewport in the head
I have a display:none icon (bars) at wide viewports (i started from there) and it should appear at smaller size when the menu disappears. (menu disappearing works)
I've set it to display:block
My SCSS:
.fa-bars {
display: none;
}
#media screen and (max-width: 600px) {
.container {
.fa-bars {
display: block;
}
}
}
But it doesn't work i don't know why
tried to select it with just *i*, with the class, i don't know please send help.
In your media query, this won't work:
.container{
.fa-bars{
display: block;
}
}
It should either be:
.container .fa-bars {
display:block;
}
... if it's important that the .fa-bars is in .containers.
Otherwise this will be fine:
.fa-bars {
display:block;
}
you need SCSS for nesting blocks,
trying doing it like this:
.fa-bars{
display: none;
}
#media screen and (max-width:600px){
.container.fa-bars{
display: block;
}
Enclose both in media queries and correct your css syntax. try this:
#media screen and (min-width:601px){
.fa-bars{
display: none;
}
}
#media screen and (max-width:600px){
.container .fa-bars{
display: block;
}
}
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.
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;
}
}