I have my CSS file, which looks like this:
.topBarBox{
background-color:black;
}
#media screen and (max-width: 900px) {
.topBarBox{
background-color:blue;
}
}
The background color of the div is black no matter what the screen size is. Am I doing something wrong here?
Change your media query
#media only screen and (max-width : 900px) {
.topBarBox{
background-color:blue;
}
}
You forgot the "only" keyword.
Change it to this:
#media only screen and (max-width: 900px) {
.topBarBox {
background-color:blue;
}
}
Make sure, your HTML page has following line in your <head> section:
<meta name="viewport" content="width=device-width, initial-scale=1">
And also, <!DOCTYPE html> above your <html> section.
This should work with:
.topBarBox{
background-color:black;
}
#media (max-width: 900px) {
.topBarBox{
background-color:blue;
}
}
Also, please make sure that either of html or body does not have any fixed width like:
body, html {
width: 1000px;
}
If there is such any CSS style, then remove it or change it like:
body, html {
width: 100%;
}
This worked fine for me:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.topBarBox {
background-color: black;
}
#media screen and (max-width: 900px) {
.topBarBox {
background-color: blue;
}
}
</style>
</head>
<body>
<div class="topBarBox">
Hello
</div>
</body>
</html>
Maybe you have some styles elsewhere in your CSS that override these styles?
You could try to use the web-inspector, that should make things clear.
Example:
.topBarBox {
background-color: black;
}
#media screen and (max-width: 900px) {
.topBarBox {
background-color: blue;
}
}
<div class="topBarBox">
Hello
</div>
Related
I'm trying to apply #media style to an iFrame, but it is not working properly.
<html>
<head>
<style>
#media (max-width:1199px) {
.myiframe {
width: 1100px;
}
}
/* Style for Large Screen */
#media (max-width:991px) {
.myiframe {
width: 900px;
}
}
/* Style for Medium Screen */
#media (max-width:767px) {
.myiframe {
width: 600px;
}
}
/* Style for Small Screen */
#media (max-width:575px) {
.myiframe {
width: 550px;
}
}
</style>
</head>
<body>
<iframe class="myiframe" src="./test.html" style="height: 1000px" frameborder="0"></iframe>
</body>
</html>
Doesn't matter the width of the browser it always open in the same default width size. Can't I use #media for iFrames?
Thanks
You should be able to make it responsive by wrapping your iframe in a div and applying the #media code to the parent div element. An example can be found here
I looked on every thread and I tried every possible solution to no avail. It just doesn't work on any browser...
HTML
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>
</head>
<body>
<div class="bg">
</div>
</body>
CSS:
#media only screen and (max-width: 1200){
.bg{
background-color: green;
}
}
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
.bg{
background-color: black;
height: 100vh;
}
Any suggestions?
You have 2 problems that are preventing it from working:
You need to specify the unit (e.g. px) in the (max-width: 1200px) - otherwise it doesn't recognise the breakpoint
You need to include the media query after the default css for .bg. Because you are including the media query before .bg{background-color: black;...}, this is overriding the CSS rule in the media query that set is to green.
See this in a working snippet (Click "Expand Snippet" to see it in fullscreen with a black background):
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.bg {
background-color: black;
height: 100vh;
}
#media only screen and (max-width: 1200px) {
.bg {
background-color: green;
}
}
<div class="bg">
</div>
You should be using min-width in your media queries and apply them using mobile first approach. It means first you apply default styles which will apply to any screen if there are no media queries. Then you reset styles for larger screen sizes. The default styles then only apply to smaller screens.
Example:
/* Default style */
.sample-class {
color: #ff0000;
}
/* Reset style for screen sizes that are 768px or higher */
#media screen and (min-width: 768px) {
.sample-class {
color: #777777;
}
}
Do make sure that you are implementing styles in the order above.
Mobile view of site
#media screen and (max-width: 600px) {
.sidebar {
width: 100% !important;
height: auto !important;
}
}
#media screen and (max-width: 600px) {
.content {
width: 100% !important;
margin-top: 20px !important;
}
#media screen and (max-width: 600px) {
.jdzn-footer-text img {
width: 100% !important;
}
}
#media screen and (max-width: 600px) {
.featured-card {
width: 100% !important;
}
}
I have already have the meta viewport tag, can anyone help me resolve this? Thanks.
Not sure what your viewport meta tag look like, but you may try replacing yours with this viewport meta tag in your index file.
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Mobile Styles */
#media only screen and (min-width:0px) and (max-width: 400px) {
body {
background-color: #F09A9D;
/* Red */
}
}
/* Tablet Styles */
#media only screen and (min-width: 401px) and (max-width: 960px) {
body {
background-color: #F5CF8E;
/* Yellow */
}
}
/* Desktop Styles */
#media only screen and (min-width: 961px) {
body {
background-color: #B2D6FF;
/* Blue */
}
}
you have to put
at you index.html file in tag like this
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>
Please add this
<meta name="viewport" content="width=device-width, initial-scale=1">
in your header, in order to let the browser know the scale on which the media queries will be evaluated
I have website that with several divs. One of those divs need to be a specific with but this can variabate between 2 width. Is it possible some how to get it to only allow 2 width?
Examaple:
With resolution of page >= 700px div width = 500px
when page resolution < 700px div width = 200px
Use css media query like #media only screen and (max-width: 300px)
when you add
#media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
When you add like this when width is 300px it will automatically change to rule you added
A simple example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgreen;
}
#media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>Resize the browserwindow. When the width of this document is less than 300 pixels, the background-color is "lightblue", otherwise it is "lightgreen".</p>
</body>
</html>
Answer
#media screen and (max-width: 700px ) {
div{
width: 500px;
}
#media screen and (min-width: 700px ) {
div{
width: 200px;
}
Use media queries:
#media only screen and (min-width: 700px) {
.my-div {
width: 500px;
}
}