I'm just getting into media queries, but this first issue is driving me crazy I've spent hours on it.
I've tried to following:
#media screen and (max-device-width: 480px) {
div.logothingy {
z-index: 100;
display:none !important;
}
}
#media (max-device-width: 480px) {
div.logothingy {
z-index: 100;
display:none !important;
}
}
#media screen and (max-width: 480px) {
div.logothingy {
z-index: 100;
display:none !important;
}
}
I load it at the end of my head file and when i look at it in firebug it's there.
Then I go to an object .logothingy and it is not even getting the styling when i reduce my window size down small. That is to say it's not even getting it and then being overwritten, it's just not getting it at all. Going insane. Please help.
Ok I'm even doing this:
.logothingy {
border:1px solid;
}
#media screen and (max-width: 480px){
.logothingy {
z-index: 100;
display:none !important;
}
}
and it's putting the border and not doing the rest of it.
I have this in the head
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Update2: I changed it to 780px and it works, but when it's at 480px it can shrink all the way down to nothing without getting the styling.
I had the same dramas and noticed that i had missed this:
<meta name="viewport" content="width=device-width">
in the head of my index page. Added it and media queries all kicked in.
This is the correct one
#media screen and (max-width: 480px){
}
Try to put inside only .logothingy instead of div.logothingy and let us know if worked
Related
SO i have designed my first site for a desktop and it works fine on desktop.
I am trying to re-design this for mobile/make it responsive.
I am doing this u=by using the style sheet and putting a condition in.
here is the condition:
#media only screen and (max-width: 375px) {
body{
background-color: red;
}
}
However, when i do this i cant get anything to change for a iphone x (or anything else with a width of 375)
my style sheet is still linked fine - i can change the background on the desktop site fine. I cannot change anything only on the mobile site using this code so im guessing it is something to do wiith the media tag.
Thanks for any help!
<meta name="viewport" content="width=device-width, initial-scale=1.0">
you can check if you have put this statement or
#media only screen and (max-width: 899px) {
body{
background-color: red;
}
}
everything looks good, I guess you have css specificity issue,
try to add !important like,
#media only screen and (max-width: 375px) {
body{
background-color: red!important;
}
}
and try to use responsive things in the neath of CSS styles.
Making webpages responsive using max-width
Try this:
body {
background-color: tan;
}
/* On screens that are 992px or less, set the background color to blue. */
#media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* On screens that are 600px or less, set the background color to olive This should work for your iPhone */
#media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
This should look like this:
Also, make sure this exists in your HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Read more about this here
Seems fine to me, but you might want to consider using this instead:
#media (orientation:portrait){
body{
background-color:red;
}
}
Don't forget about css specificity. For testing, the devtools in firefox are pretty good. You can simulate a phone by pressing Ctrl+Shift+M. It's called responsive Design mode and is made precisely for situations like yours where it's not 100% clear what is causing the problem.
Let me start over, as I clearly didn't post my question correctly.
I have a site with media queries and none of my queries are working. This is a Wordpress site build on the Genesis platform.
Header:
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
CSS with query:
#media only screen
and (min-device-width : 775px)
and (max-device-width : 1024px) {
#header {
float: none;
}
.another_site_inner-wrap {
float: none;
}
}
I'm not sure what else you would need to see to help guide me in the right direction. I'm a bit of a newbie, so please excuse my lack of knowledge.
OPTION 1
#media only screen and (max-width: 775px) and (min-width: 1024px) {
#header, .another_site_inner-wrap {
float: none;
}
}
OPTION 2
#media only screen and (max-width: 1024px) {
#header, .another_site_inner-wrap {
float: none;
}
}
If you want the #header, .another_site_inner-wrap to float: none; in 1024px You don't need to re-declare the same CSS on 775px. All CSS under 1024px will be used from 1024px below.
321px is too small try 700px to test it first, if you are trying to change it when you shrink the window then use max-width.
Try changing the border and color of a div on a certain with of the page (best way to test and see the media query in action). the media query should work so the problem is how you are implementing it
Example:
#media only screen and (max-width: 700px){
div{
border-color:red;
border-width: 10px;
border-style: solid;
}
}
Read this and play with different querys :
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Set this at your <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
I'm in the process of creating my website. the url is: http://bvanlieshout.com
It's far from done but I want to finish the home page first before I even start looking at the other pages.
So what I've tried is making everything with %. Using:
#media only screen and (max-width: 768px) {
.frontImage{
display:none;
}
}
#media only screen and (max-width: 320px) {
.frontImage{
display:none;
}
}
#media only screen and (min-width: 769px) {
.navigation ul li {
display: inline;
width: 100px;
padding-left: 10px;
}
.nowWhat{
width:800px;
}
}
that works , sorta, when i check my mobile phone and open the page it doesn't hide the images. I'm guessing because the page width is still beyond 320/768 px. So basicly what im asking is some pointers, tips. Any help would be appreciated!
Thanks
Place this <meta name="viewport" content="width=device-width, user-scalable=no"> inside of your <head></head>
This is a site that I am coming into after the developer quit. I have got everthing done but I noticed that it no responding below 480.
Here is the site
Here what I have in the head
<meta name="viewport" content="width=device-width, initial-scale=1">
Here the css for that part:
#media only screen and (min-width: 321px) and (max-width: 480px) { There some css in here }
This is a custom template for wordpress that someone created. So I am at alost I have worked many hours trying to figure out what is wrong with it. I hope someone can help PLEASE!
This should answer your question:
#footer .partners {
float: none;
width: 494px;
margin: 0 auto;
}
This div is never going to get any smaller than 494px. It also will not let it's parent(s) get below the width of it's widest element, which is this one, which is why the entire site will not go below this width.
What this CSS is saying is that the rules said in your media query will be applied when the width of the screen is between 480px and 321px. If that is what you are trying to do, it seems to work fine. Here is some test CSS and the JSfiddle result (resize the JSFiddle window)
#media only screen and (min-width: 321px) and (max-width: 480px) {
body {
background: red;
}
}
Can you be more specific in what your trying to achieve, it seems to work fine for me.
I'm trying to use media-queries in my CSS for the first time, but I don't seem to be having much luck getting it to work.
To test, I wanted my #page-wrap to resize to 440px when something like an iPhone is looking at the page, but nothing changes.
This is what I've used.
#media only screen and (max-device-width: 480px) {
#page-wrap {width:440px;}
}
I also put this in my header.
<meta name="viewport" content="width=device-width, initial-scale=1">
Is this correct?
Is there a specific reason you're using max-device-width? Unlike max-width, it will not help with people rotating their device or other types of adjustments.
Instead, stick to using max-width, like the following:
#media only screen and (max-width: 300px) {
#page-wrap {
width:100px;
}
}
Check out this jsFiddle that illustrates it.
Try this for your media query:
#media only screen and (max-width: 480px) {}