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
Related
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.
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.
I'm trying to display a 100% width iframe on my WordPress site with an existing media query and I'm trying to figure out if I can target the iframe id to be unaffected by the original media query or combine it with a unique media query to get the full frame effect with the iframe only.
This is the original code
#media only screen and (max-width: 767px) {
.responsive #top #wrap_all .container {
width: 85%;
max-width: 85%;
}
}
and this is how I need it to function, but only with id tag #frame
#media only screen and (max-width: 767px) {
.responsive #top #wrap_all .container {
width: 100%!important;
max-width: 100%!important;
}
}
I feel like this is a few seconds from complete, but I'm not sure how to finish it.
Your questions is not very clear. Then if your unique iframe ID is #frame, you can target it:
#media only screen and (max-width: 767px) {
/* your iframe */
.responsive #frame {
width: 100%!important;
max-width: 100%!important;
}
}
You can add more rules and you can target other selectors inside this media query too…
You missed a } at the end, as well as you can tag multiple elements onto CSS declarations, so you could do this if you wanted the #frame element to have the same properties, so your current code looks like this:-
#media only screen and (max-width: 767px) {
.responsive #top #wrap_all .container {
width: 100%!important;
max-width: 100%!important;
}
} // <-- Notice the ending bracket that you missed off, I added that.
Then you could tag on another element with a , like so:-
#media only screen and (max-width: 767px) {
.responsive #top #wrap_all .container, #iframe { // <-- see the , and the element?
width: 100%!important;
max-width: 100%!important;
}
} // <-- Notice the ending bracket that you missed off, I added that.
I know this is long winded, but I tried to go in depth rather than just giving you the example so you fully understood, hope I helped :)
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;
}
}