I'm trying to set up a media query where the border changes for a specific div from right in all sizes above xs and bottom for xs. I can't however seem to get media queries to do anything at all.
I'm using Bootstrap 3 with Wordpress.
I've got this line in my header:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
And then this in CSS:
#second-post {
color: black;
}
#media (max-width: 767px) {
#second-post {
color: red;
}
}
So the color of text should change to red by never does. I've tried changing the #media selector to (min-width: 200px) so it would activate on my desktop but still nothing.
Does anyone have an idea as to why the media query is just being totally ignored?
Check that there are no unwanted spaces in your code.
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.
My media query isn't working properly when I use it with some width. For example, if I use it with 1000px, everything is ok, but with 888px, isn't working. How can I fix it?
#media screen and (max-width: 888px) {
#articles article {
width: 40%;
background-color: red;
}
}
Images here:
Just in case, I added this in my HTML
<meta name="viewport" content="width=device-width" user-scalable="no">
And now it's working, but I don't know really well why this happened
Thanks :)
Your browser's max-width is larger without the viewport metatag because it is set to zoom-out the page.
Hey everyone i'm currently struggling with media queries in my website. I need to build a website that changes certain things according to screen size of the device.
I have copied the media query from the internet and added the Meta view-port. My friend has the exact same thing and there it works fine. I've added some code as reference. This should just work right?
Could someone tell me why it doesn't?
/*Mobile media query*/
#media only screen and (max-width: 360px) {
.blue_box2{
display:none;
}
}
My HTML viewport:
<meta name="viewport" content="width=device-width, initial-scale=1">
Have you tried the following?:
#media only screen and (max-width: 360px) {
.blue_box2{
display:none !important;
}
}
or this :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
My view port wouldn't work unless i put 1.0. Just wondering if the same is happening to you.
Have you got any conflicting code outside of this media query (or any inline styles in your HTML) that could cause it to function incorrectly?
The query you've shown works fine, which leads me to believe it's a problem with the code you haven't shown.
HTML
<div class="blue_box2" style="width:200px; height:200px;">
</div>
CSS
.blue_box2 { background:red; }
#media only screen and (max-width: 360px) {
.blue_box2 {
background:blue;
}
}
Just a thought:
Are you testing this using Google Chromes Developer Tools (F12), as just shrinking your browser window down normally may not reach as low as 360px.
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 have the following media query in a <style> block, within the <head> of my index.htm file....
#media screen and (min-width: 40.5em) {
header[role="banner"] {border:solid 1px red;}
}
But IE10 will not produce a red border around my header when the page loads. Now if I take the style out of that media query, then IE will process the red border when the page reloads.
What is the secret here in getting this displayed in IE10, with my page loads?
Also...I have the following set in my
<head>
...
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
...
</head>
px does not work for me either...
#media only screen and (max-device-width: 100px) {
header[role="banner"] {border:solid 1px red;}
}
no show...
UPDATE
I figured out whats going on. Within my style block I have the following css code...
#media screen and (min-width: 5em) {
//various css rules for mobile view
}
and right below it I have....
#media screen and (max-width: 40.5em) {
//various css rules for desktop view
}
Chrome understands this on my desktop browser and reads the second media query. But IE10 gets stuck on the first one. My goal is to have a mobile first approach, but not for IE to get stuck there if the screen size is larger. That is my issue...
When I remove the 1st media query, the 2nd one works in IE. How can i keep both of them and have IE know to ignore the first for larger screens...?
Set up your mobile styles first without calls to any #media queries (those will be your defaults). From there, you can use #media queries to adjust for larger/different screen resolutions.