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
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>
While studying Emacs, I'm creating a web page (Prince). The number of columns is managed by the following directives:
body {
font-family: var(--s-font-family);
font-size: var(--normal-font-size);
column-count: 3;
column-gap: 10px;
}
#media screen and (min-width: 800px) {
body {
column-count: 3;
column-gap: 10px;
}
}
#media screen and (min-width: 600px) and (max-width: 799px) {
body {
column-count: 2;
column-gap: 8px;
}
}
#media screen and (max-width: 599px) {
body {
column-count: 1;
column-gap: 0;
}
}
as you can see in the CSS stylesheet.
Now if I test the above code on my desktop pc (with Firefox 70), modifying the width of the browser window, everything work as expected. But when I open the page with my smartphone (whose size is 774x412 px, as reported by webfx) I see ever three columns, as if the media queries would be totally ignored by the browser.
Where can it be the problem?
you just have to add the following meta tags in the head tag of your html page
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
Try adding
<meta name="viewport" content="width=device-width, initial-scale=1.0">
to the head of your page
I am making my website compatible to internet explorer. How do I scale the website in internet explorer in the css hack?
Firstly I coded the website for firefox. That is why I have used some css hacks for some browsers. Now that I wanted to start to scale the website in the different browsers I started with internet explorer. I used a media query for the css hack to identify the internet explorer, but to scale the website, i need another media query. I have already tried to just 'add' the media query to that one which identifies the internet explorer and then I have copied it with min-width of 600, 768 and 998 but it just worked with min-width: 600px and ignored the other media queries. So is there another way to scale (just!) the website in internet explorer or did I code it wrong? Also I have the same question with chrome, where I did not used a media query but I still does not work there too.
/*IE*/ #media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
img.Marat {max-width: 13%;margin-left: 62%;height: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}
table.table {margin-top:15%;width:150%;margin-left:-325%;}
.Abstand4 {margin-left:-130%;}
img.Bild4 {margin-left:-1100%;max-width: 80%;height: auto;}
img.Bild6 {margin-left:-410%;margin-top:8.5%;max-width: 58%;height: auto;}
}
/*Chrome*/ #supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) {
img.Marat {max-width: 50%;margin-left: -50%;height: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}
table.table {margin-top:15%;width:150%;margin-left:-20%;}
.Abstand4 {margin-left:-130%;}
img.Bild4 {margin-left:-1100%;max-width: 80%;height: auto;}
img.Bild6 {margin-left:-410%;margin-top:8.5%;max-width: 58%;height: auto;}
}
}
I want to scale the website in internet explorer/chrome, but I do not know how to do it regarding that I had to use css hacks to identify the websites.
Sorry for my bad English and thanks for trying to help me!
If you use several media queries with min-width, you should put the minimum value at the first and the maximum at the last like this:
<head>
<meta charset="utf-8" />
<title></title>
<style>
/* Set the background color of body to tan */
body {
background-color: tan;
}
#media screen and (min-width:600px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
body {
background-color: blue;
}
}
#media screen and (min-width:768px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
body {
background-color: olive;
}
}
#media screen and (min-width:998px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
body {
background-color: aqua;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
In this order the media queries work well on IE10+. If the order is wrong, the media queries below will not work.
In the Chrome browser, we should also follow this rule. You could refer the following code:
<head>
<meta charset="utf-8" />
<title></title>
<style>
/* Set the background color of body to tan */
body {
background-color: tan;
}
#supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee)) and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) {
#media screen and (min-width:600px) {
body {
background-color: blue;
}
}
#media screen and (min-width:768px) {
body {
background-color: olive;
}
}
#media screen and (min-width:998px) {
body {
background-color: aqua;
}
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
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!