I'm trying to hide one CSS file called balloon.css on mobile devices. I'm using this balloon.css: balloon.css
My code:
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){[data-balloon] { visibility: hidden; }}
Thanks guys for helping!
Since balloon.css uses pseudo classes for hover effect you need to hide those in your media queries.
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){
[data-balloon]:after,
[data-balloon]:before { display: none; }
}
This should work.
If you want to hide a certain script of css on mobile use resolutions
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.data-balloon {
display: none
}
use display none, for no display.
Related
I want to set one page on my application to orientation:landscape and this is how i am doing it. My code below doesn't do the trick. What am i missing out?
#media only screen
and (min-device-width : 320px)
and (max-device-width : 1281px)
and (orientation : potrait)
{
html {
transform: rotate(-90deg);
}
}
When using CSS, I can properly align my elements using css with Chrome. In chrome inspector-> ipad view, all looks as they should be. But when I test it on actual iPad, some CSS are not applied. I've found ipad specific CSS media queries as follows,
** /* Safari 7.1+ */ **
_::-webkit-full-page-media, _:future, :root .my-class {
padding-right: 0;
}
**/* Safari 10.1+ */**
#media not all and (min-resolution:.001dpcm) { #media
{
.my-class {
padding-bottom: 0;
}
}}
**/* Safari 6.1-10.0*/**
#media screen and (min-color-index:0)
and(-webkit-min-device-pixel-ratio:0) { #media
{
.my_class {
padding-bottom: 0;
}
}}
Problem is, while they're working fine with portrait mode, There is no specified way for me to apply CSS into landscape mode. How can I use media queries for landscape mode in real iPad device/safari on iOS? Without affecting any other browser?
Update
I'm not looking for standard media queries like,
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES */ }
Landscape Mode
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* STYLES */}
What you are looking for cannot be achieved with media queries alone, you must use Javascript to find an Ipad Safari user agent:
function isiPad() {
return (
(navigator.userAgent.toLowerCase().indexOf(/iPad/i) > -1)
);
}
Using this Javascript, you can detect if the device is an Ipad, and apply a class on the body - using Jquery in the following example:
if (isIpad) {
$('body').addClass('isIpad');
}
Afterwards, write your media queries as suggested above:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
.isiPad .myclass {
/*styles*/
}
}
Although I can see why an iPad differentiation is needed, I can't understand why a Safari differentiation is - so, a user would visit the same webpage/webapp with Safari and see something different compared to Chrome or Opera or a different browser? :/ UX-wise doesn't sound right.
You should try this one first as it covers current Safari versions and is pure-Safari only:
This one still works properly with Safari 10.1:
/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
color:#0000FF;
background-color:#CCCCCC;
}
}
here is one I worked out for Safari 10.1+:
The double media query is important here, don't remove it.
/* Safari 10.1+ */
#media not all and (min-resolution:.001dpcm) { #media {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Alternate method:
/* Safari 11+ */
#media not all and (min-resolution:.001dpcm) {
#supports (-webkit-appearance:none)
and (stroke-color:transparent) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
To use them:
<div class="safari_only">This text will be Blue in Safari</div>
And also you can make use of JavaScript to detect the browser and append a specific stylesheet if its Safari, for eg:
var isSafari = /Safari/.test(navigator.userAgent) &&
/Apple Computer/.test(navigator.vendor);
if (isSafari) {
$('head').append('<link rel="stylesheet" type="text/css"
href="path/to/safari.css">')
};
I am new to responsive design and i didn't get it properly till now. My question is that i need to write two media queries for 480*800 and 480*856 device for both landscape and portrait mode. Please explain it to me how it works ?
I have tried this query and it seems working for both the devices in landscape mode
#media only screen and (min-width:480px) and (max-width:854px) and (orientation:landscape)
#media all and (max-width: 480px) and (min-width: 480px) and (min-height:800px) and (max-height:856px)
{
body {
background-color:lime;
}
}
This would target both devices with the same css code.
Alternatively you could split it into two media queries and target each platform.
When I was new to responsive design I found this article very useful: http://css-tricks.com/css-media-queries/
You can try the following css styles:
media screen (max-width: 480px) and (max-height:856px) {
//code
}
media screen (max-width: 480px) and (max-height:800px) {
//code
}
media screen and (max-width: 856px) {
//code
}
media screen and (max-width: 800px){
//code
}
I'm working on a WordPress site & the background image isn't displayed correctly on iPhone & iPad, could someone please direct me as to what I should place in my CSS stylesheet to have the iPhone & iPad exclude the background image entirely?
Your help is much appreciated.
EDIT I've added this to my stylesheet.css, but it still isn't working correctly.
/* iphone 5 */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
background-image: none;
background-color: #ffffff;
}
/* iphone 2-4 */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
background-image: none;
background-color: #ffffff;
}
/* ipad mini */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
background-image: none;
background-color: #ffffff;
}
/* ipad 1-2 */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1){
background-image: none;
background-color: #ffffff;
}
You'll need to add a separate stylesheet and add it if the user agent string matches an iPhone or iPad.
IS_IPAD = navigator.userAgent.match(/iPad/i) != null;
IS_IPHONE = (navigator.userAgent.match(/iPhone/i) != null) || (navigator.userAgent.match(/iPod/i) != null);
if (IS_IPAD) {
IS_IPHONE = false;
}
You could do this with Javascript
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
document.getElementById('myDiv').style.background = "none";
}
you're trying to remove the background image but from which html element? on your media queries you have this:
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
background-image: none;
background-color: #ffffff;
}
but you are not specifying what background image from which html element should be remove.
let said that you are trying to remove the background image from the body. then you could do this:
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
body{
background-image: none;
background-color: #FFF;
}
}
as an option you could change the regular background image that you're using and change its size so it works on iphone, then you could call that image using the media queries for iphone.
I am writing a media query for a web-page and managed to write media queries for 480px and more. But when I write media query for 320px it doesn't work properly. I want to capture the portrait views of most of the mobiles( iphone4, iphone5,iphone3,asus galaxy 7,samsung galaxy sII, samsung galaxy s3 ) which is 320px. The webpage I created was working with landscape views in these devices but doesnt scale for portrait views. Can anybody please point out the error in the query. This is the media queries I used.
#media (max-width: 320px)
{
html
{
font-size:0.1em;
}
}
#media (max-width: 480px)
{
html
{
font-size:0.20em;
}
}
#media (max-width: 767px)
{
html
{
font-size:0.38em;
}
}
#media (min-width: 768px) and (max-width: 979px)
{
html
{
font-size:0.65em;
}
}
#media (min-width : 980px) and (max-width:1025px)
{
html
{
font-size:0.7em;
}
}
For 320px I also tried with
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait)
{ /*Styles */}
and
#media only screen
and (max-width : 320px) {
/* Styles */
}
But none of them is working.Am I doing anything wrong/missing something?
Thanks in advance
Since you don't have a min-width on your 480 styles, and since those styles come later in your stylesheet, they override anything you put before them.
#media (max-width: 320px) {
html {
font-size:0.1em;
}
}
#media (min-width: 321px) and (max-width: 480px) {
html {
font-size:0.20em;
}
}
...
A
#media (max-width: 320px)
{
html { font-size:0.1em; }
}
B
#media (max-width: 480px)
{
html { font-size:0.20em; }
}
Using the above, consider a 320px viewport.
A and B are true, as 320 hits the limit of A and falls well below the max of B. But since B overrides A by being declared later in the stylesheet, font-size is dictated by the later declaration -- B
Adding a min-width:321px requirement to B would force B to test false for the 320px viewport -- so font-size would stay at 0.1em until B became true (minimum width of 321px).
EDIT (maybe a better way to think about it)
Instead of using max, max, max, why not take advantage of the min-width, until you reach a UI that may be best served with a range (like a tablet)
/* Set a base */
html { font-size:62.5% }
/* iPhone landscape range */
#media (min-width:321px) and (max-width:480px) {
html { font-size:1.2em }
}
/* larger than iPhone landscape, an in the iPad portrait range */
#media (min-width:481px) and (max-width:768px) {
html { font-size:1.6em }
}
/* bigger than iPad portrait */
#media (min-width:769px) {
html { font-size:2em }
}