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.
Related
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 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>
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 would normally be able to solve simple CSS problems with just some trial and error (or so I thought). But I've been trying this all day with no luck. At this point I am not sure what to do.
I am trying to center a picture at the top of my page. I am also using a template, and by default there is text there. I figured I could just replace the title text with an image and it would be fine. I was wrong.
To give a better idea of what I am doing, here is a picture of the github template. The part I am referring to is "Sample Title": https://gyazo.com/89d3c00988ce270845b0fe67b55ee5f3
The code for the header looks like this:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Sample Title by Somebody</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
</head>
<body>
<section class="page-header">
<h1 class="project-name">Sample Title</h1>
<h2 class="project-tagline"></h2>
View on GitHub
Download .zip
Download .tar.gz
</section>
The stylesheet for the Header portion looks like this (the project-name portions seemed to be related to the Sample Title part though):
.page-header {
color: #fff;
text-align: center;
background-color: #159957;
background-image: linear-gradient(120deg, #155799, #159957); }
#media screen and (min-width: 64em) {
.page-header {
padding: 5rem 6rem; } }
#media screen and (min-width: 42em) and (max-width: 64em) {
.page-header {
padding: 3rem 4rem; } }
#media screen and (max-width: 42em) {
.page-header {
padding: 2rem 1rem; } }
.project-name {
margin-top: 0;
margin-bottom: 0.1rem; }
#media screen and (min-width: 64em) {
.project-name {
font-size: 3.25rem; } }
#media screen and (min-width: 42em) and (max-width: 64em) {
.project-name {
font-size: 2.25rem; } }
#media screen and (max-width: 42em) {
.project-name {
font-size: 1.75rem; } }
.project-tagline {
margin-bottom: 2rem;
font-weight: normal;
opacity: 0.7; }
#media screen and (min-width: 64em) {
.project-tagline {
font-size: 1.25rem; } }
#media screen and (min-width: 42em) and (max-width: 64em) {
.project-tagline {
font-size: 1.15rem; } }
I have tried everything that I know of to try to center the picture (a small logo) where the Sample Title text was with no luck. I've tried doing margins with 50% and auto, absolute positions, and changing the float. I've tried editing the proeject-name stylesheet info, as well as giving the picture an ID and editing it that way. It always ends up in some odd position and I cannot get it to work. Any help would be greatly appriecated!
you should add your image to your source like this:
<h1 class="project-name">
<img src="http://c3154802.r2.cf0.rackcdn.com/ssplogo.jpg"/>
</h1>
no extra css are needed. it will center your image at the top of page.
PS
The src attribute should contain a valid URL. Since space characters are not allowed in URLs, you have to encode them.
This is not currect:
<img id="Statslogo" src="assets/Stats Logo2.png" width="640" height="200"/>
Currect Version:
<img id="Statslogo" src="assets/Stats%20Logo2.png" width="640" height="200"/>
I'm in the learning process of making my site responsive. I'm having this issue with Opera working with a specific div under #media query to "display-none". Works in all the newer browsers except Opera. Am I missing something?
CSS:
#media only screen and (max-width: 400px) {
body {
font-size: 75%;
}
#column2, #name {
display: none;
}
#-o-viewport {
width: device-width;
height: device-height;
max-zoom: 2;
min-zoom: 0.5;
}
}
Actual DIV I'm trying to hide in my HTML:
<div id="column2">
<h1 id="name">P U N K I E D E S I G N S</h1></div></div>
Viewport settings:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
Change your media query to this
#media only screen and (max-device-width: 400px) {
body {
font-size: 75%;
}
#column2, #name {
display: none;
}
}
It behaves in the same way on Opera Mini as on other browsers – so by using media queries and targeting the device capabilities it caters for all.
CSS3 Media Query support
http://caniuse.com/#feat=css-mediaqueries