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.
Related
I was following a tutorial about media queries. When I open the HTML in Chrome/Firefox, I get a blank page, and nothing displays. When I inspect the page though, the code displays normally and I can see how the media queries work. I tried adjusting the min-width and max-width of the media queries but I still get a blank page in any browser I use. I have posted the original HTML below from the tutorial.
<!DOCTYPE html>
<html>
<head>
<title>Beginners CSS - Chapter 8</title>
<style type="text/css">
* {
margin: 0px;
}
main {
margin: 10px auto;
width: 600px;
padding: 30px;
margin-top: 0px;
background-color: olive;
display: block;
}
#media screen and (max-width: 350px) {
main {
background-color: #88a5e0;
}
}
#media screen and (min-width: 600px) {
main {
background-color: red;
}
}
#media screen and (min-width: 800px) {
main {
background-image: url('images/Reeds-in-Wind-Cinemagraph.gif');
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 400px;
}
}
#media screen and (min-width: 1000px) {
main {
background-image: none;
background-color: #fff;
}
h1,
p {
display: none;
}
}
</style>
</head>
<body>
<main>
<h1>Media Queries</h1>
<p>Media allows you to make your pages to change to fit any device.</p>
</main>
</body>
</html>
The screen width changes when the developer tool is opened on the right/left dock. So, the elements that you saw perhaps are from the min-width 800px media query.
The page when the minimum width is 1000 pixels is not "blank page and nothing displays". You can read from the code below, you're setting the background-color to white, hiding the h1 & p and removing the background-image when the min-width: 1000px.
#media screen and (min-width: 1000px) {
main {
background-image: none;
background-color: #fff;
}
h1,
p {
display: none;
}
}
The page is not blank, according to your code for screens with width more than 1000px you set this styles:
#media screen and (min-width: 1000px) {
main {
background-image: none;
background-color: #FFF;
}
h1, p {display: none;}
}
so the h1 and p1 element will not be displayed and the background will be white,
if you resize the window other media queries happen.
Also by Opening your developer tools you are resizing your window.
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 have two logos: one for small screens and one for large ones.
Rather than different resolutions of the same image, these are two very different .png files and thus I can not use a scaling function. In my attempt to use them, I created the following media queries in a .jsp page with the purpose of editing a div box in order to show the files as background-images:
<style>
<meta name="viewport" content="width=device-width, initial-scale=1">
#media (min-width: 1200px) {
.zachery_div {
background: url(/assets/img/LargeLogo.png);
width: 764px;
height: 76px;
float: right;
}
}
#media (max-width: 1199px) {
.zachery_div {
background: url(/assets/img/SmallLogo.png);
width: 262px;
height: 76px;
float: right;
}
}
</style>
However, this only gives me the smaller logo when the width of the window is below 1199px.
If I expand the window to 1200px or above I receive nothing.
Both images are valid because swapping their position allows me to call either one, but never both.
Can any of you tell me what is wrong with my code?
When using mobile first approach (min-width) the smaller values come first, so your code would be:
.zachery_div {
height: 76px;
float: right;
}
#media (max-width: 1199px) {
.zachery_div {
background: url(/assets/img/SmallLogo.png);
width: 262px;
}
}
#media (min-width: 1200px) {
.zachery_div {
background: url(/assets/img/LargeLogo.png);
width: 764px;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
Note that meta tag shouldn't be inside style tag. but inside head before style
And since you had repeated properties, I put them outside of #media as they are "standard" across the code
This question already has answers here:
Can media queries resize based on a div element instead of the screen?
(11 answers)
Closed 7 years ago.
So when I resize the browser window to less than 480px, my site changes back to the original style (the css not defined inside the mixins). I figured I'd work around this by just limiting the html with min-width, but although the browser gets a horizontal scrollbar, the css still changes. Why is that and how do I work around it?
html {
min-width: 500px;
}
/********************************
HEADER
********************************/
.header img, .header h1 {
float: left;
}
.header h1 {
font-family: 'Lato', sans-serif;
font-weight: 900;
}
#media only screen and (min-width: 480px) {
.header h1 {
font-size: 2em;
}
}
#media only screen and (min-width: 768px) {
.header h1 {
font-size: 3em;
}
}
#media only screen and (min-width: 992px) {
.header h1 {
font-size: 4em;
}
}
#media only screen and (min-width: 1200px) {
.header h1 {
font-size: 5em;
}
}
html for reference:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ZIC Knjižnica</title>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900&subset=latin-ext,latin' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<div class="header">
<img src="img/ijs_logo.gif">
<h1>ZNANSTVENO INFORMACIJSKI CENTER</h1>
</div>
</body>
</html>
Setting minimum or maximum dimensions on the root element does not restrict the dimensions of the viewport for the purposes of the width and height media features.
As you have observed, the browser creates a horizontal scrollbar once you resize the viewport to be narrower than 480px. The root element remains 480px wide because of its own min-width declaration, but the viewport is too narrow to contain it and that is why the scrollbar appears. Which means that the viewport is narrower than 480px and thus no longer matches the (min-width: 480px) expression.
You can't restrict the viewport dimensions in a desktop browser. If you want the styles in (min-width: 480px) to apply even when the browser window is smaller than 480px, remove the #media conditional entirely:
.header h1 {
font-family: 'Lato', sans-serif;
font-size: 2em;
font-weight: 900;
}
#media only screen and (min-width: 768px) {
...
I am trying to make a certain page on our website mobile-friendly by hiding two large divs that aren't supposed to display as they are a) interactive and feature hover effects, and b) break up the flow of the page.
Currently testing on my LG G2 in Chrome, using
#media only screen and (max-width : 768px) {
div.example {
display: none !important;
visibility: hidden;
}
}
However it has no effect at all.
The CSS for "example" is:
div.example {
background-image: url('http://www.example.com/example.jpg'); border: 3px solid #ecf0f1;
height: 941px;
width: 1209px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
}
What am I doing wrong? As you can see by the dimensions they are too big for a standard mobile device... the page looks perfect on iPad & desktop resolutions, and even the forced requested desktop site version displays fine in mobile.
Any help appreciated, cheers.
Resolution of LG G2 is 1080 x 1920, which is larger than max-width: 768px. Your media query failed. Use:
#media only screen and (max-width : 1080px) {
}
for portrait orientation of the device. Even better, you can make use of: -webkit-device-pixel-ratio to target devices with different pixel ratio.
FYI, LG G2 has webkit-device-pixel-ratio: 3 (see Reference)
Update: Here is a general media query for high pixel ratio devices:
https://gist.github.com/marcedwards/3446599
<!doctype html>
<html>
<head>
<style>
#media only screen and (max-width : 768px) { div.example { display: none; } }
div.example {
background-image: url('http://scholarship-positions.com/internships/wp-content/uploads/2014/12/google.jpg');
background-repeat: no-repeat;
border: 3px solid #ecf0f1;
height: 941px;
width: 1209px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
}
</style>
</head>
<body>
<div class="example"></div>
</body>
</html>