This is my problem.
I'm coding a newsletter with tables. Working fine. I'm using media query's for the mobile styling. On my computer it works just fine when I scale down my browser. When scale my browser to 480px width, the content changes to the media query css.
When I open the mail on my browser on my phone (iPhone 5c) the content doesn't change to the media query's css! I tested it, and when I set media query max-width to 1000px it does change. But then the desktop version isn't any good anymore...
#media only screen and (max-width: 480px) {
.nieuwsbrief {
width: 80%;
min-width: 0px;
}
}
This is the mailing so you can scale it for your self: http://stilld.nl/template.html
I think the problem is that modern phones have a high resolution. So I used max-device-width instead of max-width, but this didn't work either.
Hope you guys can help!!
(sorry for bad English, I'm Dutch).
Fixed it myself:
I changed max-width to max-device-width. It does the trick for mobile, but not when you scale down your browser. But I can live with that.
Thanks for all your help!!
iPhone 5 has a screen width of 640px in portrait.
Normally media queries for phones have a max-width of 767px.
Here is a small digest of what measurements you should use in media queries for different devices from Bootstrap
Extra small devices
Phones (<768px)
Small devices
Tablets (≥768px)
Medium devices
Desktops (≥992px)
Large devices
Desktops (≥1200px)
Related
I need a code that can change the layout of my homepage to be viewed in different PC monitors.
I already tried "responsive Webdesign", but I don't know if there is a way of making it be shown not just in different devices but also in different PC screen sizes? Thanks in advance.
css's media tag is the one you might want to look into.
Quote from w3c here:
The #media rule is used in media queries to apply different styles for different media types/devices.
Media queries can be used to check many things, such as:
width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution
Using media queries are a popular technique for delivering a tailored style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones.
When you refer different PC monitor I assume you mean different width/length, or aspect ratio or resolution. I also assume your situation is that you want to show content in different style on different resolutions, but all on PC monitor, like 720p or 1080p or 4k monitors, following code might help.
/* On screens that are 992px wide or less, go from four columns to two columns */
#media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
As mentioned by caoool, Media Queries is what you are looking for.
Basically, using media queries you can write custom css if the resolution is more or less than a specific value.
FYI, there is an awesome open-source css framework called Bootstrap which makes designing responsive websites a lot easier and effortless.
Have a look at Bootstrap Documentation and Bootstrap Examples for more info about the framework.
I want to hide specific elements on my page for tablet and mobile devices. So I used:
#media (max-width: 991px) {
.popup_overlay {
display:none !important;
}
}
Problem appears when I open the web page from my mobile which has a resolution 1920x1080 and the element appears but its not displayed correctly as the div is not optimized for small screens.
Any suggestions how to do this the proper way?
You can add to your media query to target very high pixel density phones and tablets with min-resolution and device-pixel ratio.
See more about that here: http://css-tricks.com/snippets/css/retina-display-media-query/
I'm creating a landing page and I need it to have slightly different height in IE for desktop and modern IE (in Windows 8.1). Can I do that with media queries? I tried binging and googling but couldn't find anything.
Thanks!
Short answer: no.
Media queries will help you if you need to respond to the viewport size. For example
#media screen and (min-height: 900px) {
/* rules for tall viewports */
}
While you can be sure that IE metro/modern will be the full height of the display, you can't necessarily differentiate that from IE desktop in full-screen mode (i.e. F11), and of course your page may be viewed from a variety of devices with different display dimensions (including rotatable devices in portrait or landscape orientation).
I am trying to get to grips with media queries for different devices. I have tried my new Sony Xperia Z mobile and displays in full scale site format due to the high resolution. How do I add a media query to re-size a grid and format like a standard mobiles scale? On the Xperia the font is also too small to read and needs to show bigger. Is this a problem for retina devices that act like full size monitor displays?
Xperia Z - resolution 1920 × 1080, PPI 443
How do I include media queries for such devices?
This code targets all devices with the same pixel ratio, which is actually what you need.
#media screen and (-webkit-device-pixel-ratio:3) {
body {font-size: 250%}
}
Here is a list of devices and their device-pixel-ratio:
https://www.google.com/fusiontables/DataSource?docid=1N_eJYR_topuk3xmrOeNhYEsST_LAJikGKKzOQ2o
Yes, it would be a problem for "retina devices that act like full size monitor displays." They would be violating CSS. But since -webkit-device-pixel-ratio works for you, it sounds like this is caused by something else.
You probably omitted this:
The viewport meta tag is used in modern "mobile" browsers. (iOS/Safari, Android/Chrome, Mobile Firefox, Opera). It lets developers say "this is a properly-designed website, not desktop-specific crud". Without it, the mobile browsers assume your website is designed with an unspecified min-width, somewhere around 960 pixels.
When I say "pixel", I mean "CSS pixel". We've established that your CSS pixels are 3 physical "device pixels" on a side. And this means the largest dimension on your device works out at 640 CSS pixels. This is much less 960, so "desktop" webpages - which are assumed in the absence of a viewport meta tag - will start off zoomed out.
`#media only screen and (max-device-width: 1920px) {
/* define mobile specific styles come here */
}
#media only screen and (max-device-width: 640px) {
/* define mobile specific styles come here FOR I PHONE RETENA DISPLAY*/
}`
So I always seem to do two identical media queries for smartphones, one being the min- or max-width, and the other being the min- or max-DEVICE-width (to target the iPhone and stuff)...
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){
// Some awesome phone-specific CSS
}
#media only screen
and (min-width : 320px)
and (max-width : 480px){
// THE SAME awesome phone-specific CSS as above
}
Now I can't help but feel as though this is not the most efficient way to do things... Especially if I'm moving a lot of stuff around/restyling my site/application to be phone specific. Also especially when I have to do two more for the tablet sizes.
Now do I really need both? Does it matter and what exactly is the difference?
The difference between width and device-width can be a bit unclear. I'll try to explain.
device-width refers to the width of the device itself, in other words, the screen resolution of the device. Lets say your screen's resolution is 1280x800. This means the screen is 1280 pixels across, so it has a device-width of 1280 pixels.
In contrast, width refers to the width of your browser's viewport size.
In most cases width is more versatile when it comes to creating responsive webpages (and it is the method I would recommend you'd use), though device-width could be useful when you wish to specifically target mobile devices (and not desktops with a very small browser window).
DEVICE width will target only DEVICES and not desktops, u wouldnt hv any desktop/laptop of width 320x480, so u can use DEVICE width.
You could probably just use max-width: 767px this way you would target everything below an iPad.
I would also just specify dynamic widths so you don't have to differentiate between single devices.