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;
}
Related
I have read through other questions and tried to make my text become responsive past a certain breakpoint. But when I save it does not scale it just takes my font-size: 60px; value. Min-width means if the px value is greater than or equal to and vice versa for max-width correct? So in theory, this should work?
#media only screen and (min-width: 1024px){
.et_pb_text_2 h3{
font-size: 60px;
}
.et_pb_text_5 h3{
font-size: 60px;
}
}
#media only screen and (max-width: 1023px){
.et_pb_text_2 h3{
font-size: 4vw!important;
}
.et_pb_text_5 h3{
font-size: 4vw!important;
}
}
Can you please explain which problem you are facing or share your html?
I have created html for it and it works nicely.
Below 1024px screens, font-size will be 4vw. It means that the font size will be only 4 percent of viewport width whenever screen size is below 1024px.Whenever screen size is equal to or greater than 1024px it will stick to 60px.
See below code and it is working perfectly.
.et_pb_text_2, .et_pb_text_5 {
display: inline-block;
}
#media only screen and (min-width: 1024px){
.et_pb_text_2 h3{
font-size: 60px;
}
.et_pb_text_5 h3{
font-size: 60px;
}
}
#media only screen and (max-width: 1023px){
.et_pb_text_2 h3{
font-size: 4vw!important;
}
.et_pb_text_5 h3{
font-size: 4vw!important;
}
}
<div class="et_pb_text_2">
<h3>Hello</h3>
</div>
<div class="et_pb_text_5">
<h3>World</h3>
</div>
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 have a bootstrap responsive design working well on a wide range of browsers, but the page width is limited on iPhone. I have already added the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
And it does not seem to help. The site is here: http://themenuengine.com. Any advice would be much appreciated!
Around line 780 of bootstrap-responsive.css:
#media (max-width: 767px) {
body {
padding-right: 20px;
padding-left: 20px;
}
Override that padding with 0 and it will be full-width.
For example:
#media (max-width: 767px) {
body {
padding-right: 0 !important;
padding-left: 0 !important;
}
}
I have 3 media queries on my site, the issue i'm having is the -webkit-min-device-pixel-ratio one for iphone is conflicting on android devices and the screen is not resolving correctly on android, if i take this mq out the site renders correctly but on an iphone 4 it doesn't and works off a 320px width.
Is there a way can get only an iphone 4/4s device to look at the -webkit-min-device-pixel-ratio: 1.5 media query ?
Below are my media queries:
/*iphone4*/
#media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {
/*Main*/
div#container {
width: 480px;
}
}
/*Other mobile phones*/
#media screen and (max-width: 767px) {
div#container {width: 480px;}
}
/*Tablets*/
#media only screen and (max-width: 1023px) and (min-width: 768px) {
div#container {width: 768px;}
}
How wide do you think an iPhone 4 is (in pixels) and what do you think it's scale value is? reading your rules, I feel like you're trying to say "if it's a big phone, make this 480 wide. if it's a smaller phone that's retina, make it 480 wide, otherwise, 768"
but in reality, an iphone4 is 320 pixels wide, with a scale of 2, so you'd want to make your container 320px wide, and then do something with background-size:contain for images
However, ignoring that... this page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Media2</title>
<style>
body, html {margin:0;padding:0;height:100%;width:100%; background-color:#000000;}
#block {background-size:contain; background-image:url('http://www.robotwoods.com/images/blog/640_300px.png'); display:block; width:320px; height:150px; }
#media (max-width: 767px) { body {background-color:#0000FF;} }
#media (max-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) { body {background-color:#00FF00;} }
#media (min-width: 768px) { body {background-color:#FF0000;} }
</style>
</head>
<body>
<div id="block"></div>
</body>
</html>
Appears:
blue in an iPod touch
blue in an Android Nexus S
blue in a Blackberry Bold
green in an iPhone4
red in an iPad
you can go to http://www.robotwoods.com/dev/misc/so_media2.html if you have other devices to test. And I posted a little entry about media queries here: http://blog.robotwoods.com/2012/08/media-queries/ but didn't really get into the pixel-ratio aspect
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 }
}