Safari on the iPhone renders my {position: relative; top: 80px;} div 1px too low (all other browsers work fine) - is there any way to fix this via conditional css?
I would begin by this Comprehensive List of Browser-Specific CSS Hacks (and comprehensive it is!)
/* iPhone / mobile webkit */
#media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
Related
I'm trying to "hide" the wrapper "" on mobile screens, not by actually hiding it or "not displaying it", but by setting the padding to 0px. My initial approach was to use media queries, but my attempts have failed.
Below is the styling for the media query:
<mj-head>
<mj-style>
.wrapper-fix div {
padding: 0px 50px !important;
}
#media only screen and (max-width: 480px){
.wrapper-fix div {
padding: 0px 0px !important;
}
}
</mj-style>
</mj-head>
And below is the wrapper:
<mj-wrapper css-class="wrapping-fix" background-color="#fff">
<mj-include path="./somecontent.mjml" />
</mj-wrapper>
The approach above doesn't work. My understanding is that the 50/0px are added to tags after inlining - the actual html content for the email. The doesn't really exist there.
Did anyone manage to do something like this? How can it be solved? Are there any alternatives?
I am having trouble with my css media queries. They work great on the computer but don't work on my iPhone. Here is what i have:
#media only screen and (max-width: 400px) {
.logInCenter{
width:90%;
left:0;
top:0;
margin-left:0px !important;
}
}
#media only screen and (min-width: 401px) and (max-width: 768px) {
.fluid-half
{
display:block;
padding:20px 0px;
width:100%;
float:none;
}
}
#media only screen and (min-width: 769px) and (max-width: 991px) {
}
#media only screen and (min-width: 992px) and (max-width: 1199px) {
}
#media only screen and (min-width: 1200px) {
}
The problem is that my iPhone only detects the styles when I put them in the third media query. The issue is that at 100% width, it looks just like any other desktop site. Really far away. I hope that makes sense! thanks!
Have you made sure that the following code is in your HTMl head? Tells the devise to look at viewport sizes.
<meta name="viewport" content="width=device-width">
Since you are using css media queries, you should not use meta tag in your html file.
You can set the same in css using:
#viewport {
width: device-width;
zoom:1;
}
Apple have just released their new iOS7 operating system but it's causing issues with my retina icon media queries. It appears the background-size property is being ignored. An example image is here: http://imgur.com/R3OgFgN
The image replacement works perfectly on iPhones 4, 4s, 5 running iOS6 and below (any browser). iOS7 browsers appear to grab the high-res image but ignore the background-size property:
#media (-webkit-device-pixel-ratio: 2){
.b .logo{
background: url(../img/2x/m-yellloh-logo#2x.png) no-repeat 0 0 !important;
-webkit-background-size: 100%;
-moz-background-size: 100%;
background-size: 100%;
}
What it does do;
Replaces the original image with the #2x image
What it doesn't do;
Fit the background image to the div element size.
Tested on iOS7 Safari & Chrome.
Has anyone had this problem, and if so how did you manage to fix it?
I solved it! Turns out, iOS7 resets the background-size property when running a media query. The trick is to specify the background-size with the exact pixel dimensions, or with a 100% value like so;
#media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx){
.logo{
background: url(../img/2x/logo#2x.png) no-repeat 0 0 !important;
background-size: 100% !important;
width: 30px;
height: 40px;
}
N.b - I also found that including the !important tag ensured all retina devices read the query properly, including Samsung S3 & S4. Enjoy.
This is not buggy behaviour. This is your fault.
You set all background properties here:
background: url(../img/2x/m-yellloh-logo#2x.png) no-repeat 0 0 !important;
so browser treats this as
background-image:url(../img/2x/m-yellloh-logo#2x.png) !important
background-position:0 0 !important
background-repeat:no-repeat !important
background-size:auto auto !important
and so on
thus your last line background-size: 100%; is overridden by background-size:auto auto !important;
Because the example is an image. I cannot inspect the code.
You might try the following option:
If the div's width and height is fixed. You can set a fixed width and height to the image. also normally the retina-display need the "min-device-pixel-ratio" for high resolution display.
e.g.
#media (-webkit-min-device-pixel-ratio: 2)
and (min-device-pixel-ratio: 2){
.b .logo{
background: url(../img/2x/m-yellloh-logo#2x.png) no-repeat 0 0 !important;
width: 200px;
height: 100px;
}
or if the div is not fixed.
#media (-webkit-min-device-pixel-ratio: 2)
and (min-device-pixel-ratio: 2){
.b .logo{
background: url(../img/2x/m-yellloh-logo#2x.png) no-repeat 0 0 !important;
background-size: contain;
}
Try if this can fix your issue.
Cheers!
I am working on building a site for responsive design.
I have a certain CSS style as follows:
/* when viewport height less than 320px */
#media screen and (max-height: 319px) { /* TRIED FOR IPHONE -- CAN'T GET TO WORK YET */
#footer {
font-size: 65%;
line-height: 110%;
margin-top: 12px;
}
}
I tested it on my iPhone in landscape mode and the font-size does not change to 65%, nor do any of these 3 styles take effect. Is this a valid and proper way to detect the screen height dimension for an iPhone?
Could you try using a different media query?
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
}
I have never had a problem with media queries. After testing your website through an online iPhone emulator in both portrait and landscape mode, the font-size is set to 65%:
http://www.testiphone.com/
However, if the media query above does not work, could you try changing your viewport?
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
jQuery
$(document).ready(function(){
if($(document).width() <= 320){
$("#footer").addClass("newclass")
}
})
CSS
.newclass {
font-size: 65%;
line-height: 110%;
margin-top: 12px;
}
I'm using jQuery Mobile 1.6.4 version, developing a mobile site and i have a data-icon that's not showing at all only in iOS 5 (so far from the feedback).
For the header:
<div data-role="header" data-position="inline" data-theme="a">
<a data-rel="back" data-icon="arrow-l" data-ajax="true" data-theme="a" data-inline="true" title="Back">Back</a>
<h1>Where can I travel</h1>
This is the global icon css code that we are using:
.ui-icon,
.ui-icon-searchfield:after {
background: #FFFFFF /*{global-icon-color}*/;
background: transparent /*{global-icon-disc}*/;
background-image: url(http://code.jquery.com/mobile/latest/images/icons-18-black.png) /*{global-icon-set}*/;
background-repeat: no-repeat;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
Not only the header, but it's entire site that's using the global icon.
Any idea on this, guys?
Thanks!
The reason for the issue might be the retina display introduced in iphone 4S.To take care of retina display,we have to use icons with double the resolution.Try including this code in your css and see if there is any difference.
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-resolution: 240dpi) {
.ui-icon,
.ui-icon-searchfield:after {
background-image: url(images/icons-36-black.png);
}
}