Wordpress does not seem to respect any of my media queries. For example, putting this at the bottom of my style.css does nothing:
#media only screen and max-width(700) {
body {background-color: black !important;}
}
I'm using a custom theme, but it's fairly straightforward and all my other styles work fine. What am I missing? I don't think I'm doing the CSS wrong, so my thinking is that it's some conflict with Wordpress.
I have this in my header.php:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The code for the media query has to be like this (note the exact syntax):
#media only screen and (max-width: 700px) { ... }
Related
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.
I have this piece of code. I'm beginner :/
https://ibb.co/ccrFFG
Id like to add some responsibility by
#media only screen and (max-width: 320px) {}
but it doesnt works with IDs. How would you change the code pls? :)
Thanks
From your code, I don't know exactly what you are trying to achieve but I will advise you to use the code below as a guide.
#media screen and (max-width: 320px) {
#yourID {
width: 260px !important;
}
}
css media-querys only work if you use the viewport meta-tag, make sure that you use it on your site.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You can ready more about it here:
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
I have tried changing the bracket to different positions. The following piece of code from my CSS3 is not accepted by the W3C CSS Validator. Would someone please help me identify where the parsing error is in the following piece of code?
Many thanks!
#media (min-width: 300px) {
#viewport {
width: 300px;
}
}
You cannot nest a #viewport at-rule inside a media query. A media query controls how elements look on the page at certain widths, and #viewport is a fallback for <meta name="viewport">. #viewport should be outside of the media query, at the base level of your CSS.
Having said that, #viewport is only relevant when dealing with Internet Explorer's 'snapped mode' on Windows 8 or Windows 10. Considering how little difference it would make, you can pretty much safely ignore it entirely unless you're doing very optimised label controls for specific browsers and operating systems.
Setting a META viewport of <meta name="viewport" content="width=device-width, initial-scale=1"> is enough to handle the various different browsers on mobile devices.
Assuming you are simply trying to adjust an element on the page, you can simply target it directly with the discrepancies when dealing with the various browsers. You can then simply rely on regular media queries to style the page at different widths:
#media screen and (min-width: 300px) {
#id {
width: 300px;
}
}
Hope this helps! :)
Add meta in the head section of your html.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
And your CSS should be like this
#media only screen and (max-width : 500px) {
div {
width: 300px;
}
}
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.
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.