I have the following code, which I am getting from a tutorial.
When I run on Chrome, or Firefox, all the two lines are displaying no matter if I resize the window or not. What am I doing wrong?
<html>
<head>
<style>
#content-desktop {display: block;}
#content-mobile {display: none;}
#media screen and (max-width: 768px) {
#content-desktop {display: none;}
#content-mobile {display: block;}
</style>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<div class="content-desktop">
This is the content that will display on DESKTOPS.
</div>
<div class="content-mobile">
This is the content that will display on MOBILE DEVICES.
</div>
<body>
</body>
</html>
First, you're using class="content-desktop" and class="content-mobile" and your CSS is expecting id because you used #content-desktop and #content-mobile.
Secondly, you forgot to close your bracket.
In CSS, you need to use the dot . to select class and # to select id.
Try this :
.content-desktop {display: block;}
.content-mobile {display: none;}
#media screen and (max-width: 768px) {
.content-desktop {display: none;}
.content-mobile {display: block;}
}
You're never closing the bracket opened here:
#media screen and (max-width: 768px) {
Therefore, the entire #media rule is dropped by the parser. Simply close it where it should be closed (probably before </style>).
You never closed the brackets, you're using # to target class you need to use .
also you're div's were outside the body tag. Further more you need to have a query for the above scaling as well in this case. the following code is tested. you can run it directly.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.desktop {
background-color: yellow;
padding: 20px;
}
#media screen and (max-width: 600px) {
.desktop {
display: none;
}
.mobile{
background-color: red;
padding: 20px;
}
}
#media screen and (min-width: 600px){
.mobile{
display: none;
}
}
</style>
</head>
<body>
<h2>Hide elements on different screen sizes</h2>
<div class="desktop">Show on desktop but hide on mobile.</div>
<div class="mobile">Show on Mobile but hide on desktop</div>
</body>
</html>
Related
In my html code below i added a divider which i want the background color to change the blue when it reaches a certain pixel width. Right now my code is having no effect. I want it to the divider to change to blue. How can i get this to work? The code in question is #media (min-width: 551px) {
div { background-color: Blue }
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
background-color: lightgrey;
padding: 20px;
}
#media (max-width: 550px) {
p { font-size: 16px; }
}
#media (min-width: 551px) {
p { font-size: 32px; }
}
#media (min-width: 551px) {
div { background-color: Blue }
}
</style>
</head>
<body>
<div class="example">Example DIV.</div>
</body>
</html>
I'm assuming you want the large screen bg color to be lightgrey and the small screen (less than 551px) color to be blue?
If that is the case, you need to specify *max-width on the media query. I would also make sure you call out the div by class so you aren't targeting all your divs.
Try this code.
If I have the colors reversed, you can just switch them.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
background-color: lightgrey;
padding: 20px;
}
#media (max-width: 550px) {
p { font-size: 16px; }
div.example { background-color: blue }
}
#media (min-width: 551px) {
p { font-size: 32px; }
}
</style>
</head>
<body>
<div class="example">Example DIV.</div>
</body>
</html>
You need to add !important to force the CSS according to the screen resolution.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
background-color: lightgrey;
padding: 20px;
}
#media (max-width: 550px) {
p {
font-size: 16px; !important
}
}
#media (min-width: 551px) {
p {
font-size: 32px; !important
}
}
#media (min-width: 551px) {
div {
background-color: Blue !important
}
}
</style>
</head>
<body>
<div class="example"><p>Example DIV.</p></div>
</body>
There are two reasons this isn't working the way you want it to currently.
First, a style declared outside of a media query has higher "importance" than a style declared inside the media query. In order to combat that, you need to use !important after the media query style.
Second, because you are using a more general object name for the media query, it won't have as much hierarchy once again. Instead of using div, you need to use the same div.example inside the media query.
So the two solutions are either:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
padding: 20px; /* removed the bgcolor here... see below*/
}
#media (max-width: 550px) {
div.example {
background-color: lightgrey; /*option 1: move the gray state into a media query, making it the same level of importance as the blue state*/
}
p { font-size: 16px; }
}
#media (min-width: 551px) {
p { font-size: 32px; }
div.example { background-color: blue} /*option 2: use the same specificity of naming inside the media query.*/
}
</style>
</head>
<body>
<div class="example">Example DIV.</div>
</body>
</html>
I created a website and I used 2 divs, 1 has all the code for the desktop layout and one has all the code for mobile, I did this and would like to keep it this way for future changes,
On both divs display is default and on the media queries I have it set as this:
/* DESKTOP AND MOBILE VEIWPORT TOGGLE */
#media screen and (max-width: 1024px) {
.desktop {
display: none;
}
#media screen and (max-width: 100vw) {
.mobile {
display: none;
}
}
}
HTML
<div class="desktop">
<p>desktop</p>
</div>
<--- MOBILE DIV --->
<div class="mobile">
<p>mobile</p>
</div>
Also, all of my code can be found here with the html
https://codesandbox.io/s/soph2?file=/css/index.css:244-451
Also sorry if this was a stupid question, I'm 13 and I've only been coding for a year now.
When I go to a mobile device, the desktop view does not show but neither does any of my mobile code, please help me, thank you very much!
Also, I just noticed when on the desktop mode, the mobile div shows up too for some reason under the footer.
Media queries never go in media queries. Each one is basically a separate bit of css for a specific screen. In addition, 100vw should never be used in media queries, since it will always match. Also, please try to properly format your code. Makes it much more readable
#media screen and (max-width: 400px) {
.mobile {
display: none;
}
}
#media screen and (max-width: 1024px) {
.desktop {
display: none;
}
}
Add this in the head section :
<meta name="viewport" content="width=device-width, initial-scale=1">
#media screen and (max-width: 1023px) {
.desktop {
display: none;
}
.mobile {
display: block;
}
}
#media screen and (min-width: 1024px) {
.mobile {
display: none;
}
.desktop {
display: block;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="desktop">
<p>desktop</p>
</div>
<div class="mobile">
<p>mobile</p>
</div>
</body>
</html>
i want to give css for mobile view and tablet view. i have created media tag and wrote the code but its not working i have wrote
at top of the phtml file and wrote class name for which i have give css like below
<code>
<meta name="viewport" content="width=device-width,initial-scale=1.0"> //at top
#media only screen and (max-device-width: 1000px)
{.numbertext
{
font-size: 50px;
color: red;
}
}
</code>
please help me how should i write to get correct output
wrapp your media queries inside the style tag.
<style type="text/css">
#media screen and (max-width: 1000px){
.yourClass{
}
}
</style>
Probably you are missing a style tag.
It should be like this :
<style>
#media only screen and (max-device-width: 1000px)
{
.numbertext
{
font-size: 50px;
color: red;
}
}
</style>
I have this real code to show and hide two divs depending on device type:
Problem: in Android the #div-desktop is shown.
I need to show only div#div-mobile on mobile devices
I need to show only div#div-desktop on desktop devices
CSS
#media screen and (min-width: 0px) and (max-width: 700px) {
#div-mobile { display: block; }
#div-desktop { display: none; }
}
#media screen and (min-width: 701px) and (max-width: 3000px) {
#div-mobile { display: none; }
#div-desktop { display: block; }
}
HTML
<div id="div-mobile">m<img width="100%" height="auto" src="http://uggafood.com/wp-content/uploads/2017/03/ugga-food_mobile.jpg" alt="" width="600" height="1067" /></div>
<div id="div-desktop">d<img width="100%" height="auto" src="http://uggafood.com/wp-content/uploads/2017/03/ugga-food_desktop.jpg" alt="" width="1920" height="1280" /></div>
I have just checked the live link.
Meta tag is missing for responsive devices.
Add the below code for detecting mobile devices.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
EDIT
After seeing your site, you need to add:
<meta name="viewport" content="width=device-width, initial-scale=1">
You can just use min-width
Also, don't use width/height html tags in img use CSS instead
img {
max-width: 100%
}
#div-desktop {
display: none;
}
#media screen and (min-width: 701px) {
#div-mobile {
display: none;
}
#div-desktop {
display: block;
}
}
<div id="div-mobile">m<img src="http://uggafood.com/wp-content/uploads/2017/03/ugga-food_mobile.jpg" alt="" /></div>
<div id="div-desktop">d<img src="http://uggafood.com/wp-content/uploads/2017/03/ugga-food_desktop.jpg" alt="" /></div>
Change your media queries to the following.
Just change the widths to whatever you'd like. The top media query says if the min width is above standard mobile sizes show xyz, then the second one says if it's below do abc.
#media screen and (min-width: 769px) {
#div-mobile { display: none; }
#div-desktop { display: block; }
}
#media screen and (max-width: 768px) {
#div-mobile { display: block; }
#div-desktop { display: none; }
}
this line only find the size resolution of the user system and gives to your css code
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If you use sass, this is a very efficient way of effecting media queries and writing appropriate css per devise: https://eduardoboucas.github.io/include-media
include-media is a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.
I'm trying to use/ mock media queries in IE8 using respond.js
I have the attached code all set-up to run under localhost in IIS (just a plain and simple static site). Everything works on Chrome, FF, Safari but not IE (I'm using version 8)
I'm new to front end development and I cannot seem to work out what it is I am doing wrong. Please can somebody take a look and give me any pointers?
Thank you for your time,
Barry.
HTML File;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Media Query Test</title>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
<div class="wrapper one">This box will turn to pink if the viewing area is less than 600px</div>
<div class="wrapper two">This box will turn to orange if the viewing area is greater than 900px</div>
<div class="wrapper three">This box will turn to blue if the viewing area is between 600px and 900px</div>
<div class="wrapper iphone">This box will only apply to devices with max-device-width: 480px (ie. iPhone)</div>
<p class="viewing-area">
<strong>Your current viewing area is:</strong>
<span class="lt600">less than 600px</span>
<span class="bt600-900">between 600 - 900px</span>
<span class="gt900">greater than 900px</span>
</p>
<script src="/js/respond.min.js"></script>
</body>
</html>
CSS File;
.wrapper {
border: solid 1px #666;
padding: 5px 10px;
margin: 40px;
}
.viewing-area span {
color: #666;
display: none;
}
/* max-width */
#media screen and (max-width: 600px) {
.one {
background: #F9C;
}
span.lt600 {
display: inline-block;
}
}
/* min-width */
#media screen and (min-width: 900px) {
.two {
background: #F90;
}
span.gt900 {
display: inline-block;
}
}
/* min-width & max-width */
#media screen and (min-width: 600px) and (max-width: 900px) {
.three {
background: #9CF;
}
span.bt600-900 {
display: inline-block;
}
}
/* max device width */
#media screen and (max-device-width: 480px) {
.iphone {
background: #ccc;
}
}
Link to respond.js I am using (local version of; https://github.com/scottjehl/Respond/blob/master/dest/respond.min.js)
<script src="/js/respond.min.js"></script>
Should have been
<script src="js/respond.min.js"></script>
Note I have removed the preceeding "/"
I am now "fist pumping" the air as I have media queries in IE 8.
Thanks for your time. I hope this helps!