I am using a wordpress theme in "responsive-design mode". Viewing website on iPad renders the way it should (including desktop, non-responsive), but viewing on iphone gets messy. Can someone help me figure out how to duplicate the iPad style to the iPhone and all non-desktop devices; and delete the smartphone styling completely. I am looking to duplicate the exact layout as the iPad for all mobile devices (just smaller versions). The author of the theme told me to look in the "responsive-all.css" file and fix things there, but I'm having trouble since I'm not well versed in css. Here is the link to the css. responsive-all.css
Any help is MUCH appreciated. Thanks
Michael
Step 1 : if you want to delete the mobile's view, just comment the end of the CSS file beginning with or delete and of course the following :
/*
* -------------------------------------------------------------------------------------------
* MOBILE BOTH VIEWS
* -------------------------------------------------------------------------------------------
*/ #media only screen and (max-width: 767px) {
...
Step 2 : Then change, the condition to get the same design for tablets/smartphones :
/*
* -------------------------------------------------------------------------------------------
* TABLET PORTRAIT
* -------------------------------------------------------------------------------------------
*/ #media only screen and (max-width: 979px) {
After, I don't know what you want on this mobile/tablet view exactly.
Replacing your current viewport meta tag with the following will probably make the iPhone (and most other mobile devices) look like the iPad:
<meta name="viewport" content="width=768">
I'm trying to get my responsive website to "respond" when on iphone or ipad for example... my css file is linked here - http://uximag.com/styles.css
All the responsive style is at the bottom of the stylesheet. it works fine while on a desktop but when I go to an iPhone it doesn't work?
Please let me know, I've tried a few methods and cant seem to figure it out.
JimmyRare's comment is a good one. Set your max width to be smaller (640px for iPhone5) and it should apply to your iDevices and your browser when it's shrunk down.
Another option is setting up the code in your HTML document, which isn't ideal in that it combines your HTML writeup with your styling, but it has the added benefit of letting you target the width of the screen's resolution and not the browser width:
<link rel="stylesheet" media="screen and (min-device-width: 640px)" href="640.css" />
there are several html files to guide the user through our app and to introduce him to new features. It is a universal app for iPhone and iPad. If the user selects the help section for the iPhone version, i want to show him images scaled for the iPhone device.
But now there is my problem. In the CSS file there is only one class boximage for all the images. How is it decided which image to load? Should i stuck each image in its own class?
Thanks in advance four your ideas!
Regards,
buk
You can try this.
<style type="text/css">
#media all and (max-width: 800px) {
.boximage{ background:url(image_name1.jpg)}
}
#media all and (min-width: 800px){
.boximage{ background:url(image_name2.jpg)}
}</style>
or Use javascript to find the user-agent and set the image from script.
I've been having an issue with font rendering in mobile Safari (Safari on my Mac renders fine). I'm using an OpenType font along with the #font-face selector and some of the characters (mainly just 's' and 'c') are appearing a lot more thin than others (very noticeably so - relative to each other one looks 'light' and the others look 'bold'. The weirdest thing about this is that it's only happening in landscape mode. Has anyone seen this before? The only thing that makes this go away is to set -webkit-transform: translate3d(0,0,0); on the body selector which seems completely wrong, but may give a bit of insight into the problem. I came across that on another site: http://openradar.appspot.com/11097956.
Thanks in advance for any help,
Brandon
This looks like what you need:
Fix font size issue on Mobile Safari (iPhone) where text is rendered inconsistently and some fonts are larger than others?
They used this code to fix it:
/* Mobile browsers only */
#media only screen and (max-device-width: 480px) {
td#main_box { -webkit-text-size-adjust:100% }
}
I want to change my web page CSS for web browsers running on cell phones, like the iPhone and Android. I've tried something like this in the CSS file:
#media handheld {
body {
color: red;
}
}
But it doesn't seem to have any effect, at least on the iPhone. How can I write my CSS to work differently on the iPhone etc, ideally without using javascript?
You can use #media queries:
<link rel="stylesheet" href="path/to/iphone.css" media="only screen and (max-device-width:480px)"/>
This particular version will target the iPhone (and any other device with a screen of max-device-width of 480px.
Apple, for the iPhone, though this is from memory so I can't be entirely sure of its accuracy, chose to disregard the use of handheld or mobile stylesheets, since it, and other iOS devices, were capable of rendering css more or less on a par with desktop browsers, via Safari. For other devices I'm unsure, exactly, how faithful they are, though the A List Apart article (linked-to above) gives a brief run-through of some.
Edited in response to comment, from #Colen:
Hmm, it looks like a lot of new mobile devices have higher resolutions (e.g. droid X is 854x480). Is there any way to detect those? I don't think those are being handled with this query.
I'm unable to say for certain, since I've no access to those devices, however another A List Apart Article: Responsive Web Design notes that:
Thankfully, the W3C created media queries as part of the CSS3 specification, improving upon the promise of media types. A media query allows us to target not only certain device classes, but to actually inspect the physical characteristics of the device rendering our work. For example, following the recent rise of mobile WebKit, media queries became a popular client-side technique for delivering a tailored style sheet to the iPhone, Android phones, and their ilk.
So I presume that they, Android devices, must be target-able by #media-queries, but, as noted, I'm unable to say with any certainty.
To target device-resolution, there is an example of:
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="shetland.css" />
Further reading: W3 Candidate Recommendation for media queries.
From this site there are a few other media queries that are useful in targeting iPhones/Android Phones:
// target mobile devices
#media only screen and (max-device-width: 480px) {
body { max-width: 100%; }
}
// recent Webkit-specific media query to target the iPhone 4's high-resolution Retina display
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
// CSS goes here
}
// should technically achieve a similar result to the above query,
// targeting based on screen resolution (the iPhone 4 has 326 ppi/dpi)
#media only screen and (min-resolution: 300dpi) {
// CSS goes here
}
I was able to successfully use the max-device-width media query to successfully target Android phones, although I had to adjust the width up to 800px rather than the 480 listed. For iPhone 4, the -webkit-min-device-pixel-ratio worked to target the iPhone4 (max-device-width: 480px did not, I presume that will target the iPhone3 but didn't have one handy to test.)
I can see this getting quite messy, but if you have to support a multitude of devices and have custom CSS for each of them, as long as they support media queries it appears as it is possible to do what you have to to tweak each platform. And yes, I would code to standards first, so that as much CSS is resuable, but many times we are talking about presenting alternate layouts these days sized appropriately for the devices being used.
#media handheld refers only to those ancient tiny proto-html cellphones from years past which couldn't even really display web pages. The ePUB, MOBI, Tablet, community of vendors all said emphatically "H*ck no, we are not #media handheld devices!" because they were correctly worried that this would land them forever in a no-man's land subservient to "real" web pages.
With today's small devices with very high resolution displays we still don't have a good way to tell HTML how to display things "correctly" on large displays with relatively low resolution vs. small displays with very high resolution. And as a certified old fart my eyes would like to remind you that no, the answer is not just to make everything including fonts 2X smaller.
No, neither iPhone or Android browsers supports CSS #media handheld.
Look at using the media query 'hover'.
Put this in your SCSS file:
// At this point the CSS would target screens above 990px - but only
// if they support hover (i.e. laptops, PC's etc).
$point-at-which-use-large-screens: (min-width 990px) (hover hover);
.some-class-you-want-to-target {
// Some CSS to only apply to larger screens with mouse available.
#include breakpoint($point-at-which-use-large-screens) {
color: red;
}
}
After running grunt etc on the SCSS this will produce CSS looking like:
#media (min-width: 991px) and (hover: hover) {
color:red;
}