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/
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.
Currently I'm working on a webApp which will be displayed on two different TV screens.
One will be in landscape mode, and the other one will be in portrait mode.
So, I coded this app with CSS media queries to make it adaptable in those two configurations and for different resolutions.
I used queries like this for example:
#media screen and (orientation: portrait) and (min-width: 2160px) {
}
#media screen and (orientation: landscape) and (min-width: 3840px) {
}
The application is working perfectly fine on browser.
But when I try my app on vertical screen, obviously the TV display it on landscape mode (because this is just a screen which is rotated).
But the problem is, when I change the parameters on TV options to display the image as portrait, the app has just rotate and the image has expand to the border of the screen. None of my CSS media queries has done this work like on the browser.
If someone have a technical explanation and/or solution, I'm looking forward to hearing from him/her.
Thanks
Whenever I press ctrl+shift+m to enter responsive design mode in Firefox, it shows the screen dimensions in the upper left, but if I see 992px as the width here and then create this media query:
#media (min-width: 992px) {
/*stuff to happen at 992px*/
}
, the stuff that is supposed to happen at 992px actually happens at 1082px, according to Firefox. Why is this? Is there a way to get Firefox's measurements to match exactly with the results that media queries produce?
Additionally, stuff that is supposed to happen at 768px according to the media query appears to be happening at 838px.
The answer was that the amount of zoom in Firefox messes with the responsive design mode measurements. Apparently, the dimensions shown in responsive design mode aren't the virtual dimensions of the website but are instead the screen dimensions, so they don't change when Firefox is zoomed in or out.
Try this code:
#media (max-width: 992px) {
/*stuff to happen at 992px*/
body{
background: #000;
}
}
Instead of
#media (min-width: 992px) {
/*stuff to happen at 992px*/
}
In Firefox, Make Sure while testing for website responsiveness , the browser zoom setting to be 100% only. It effects the screen width shown to you in RDM (Responsive Design Mode).
I am not sure about others but i got same issue earlier.
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)
I have coded a responsive website, in which I have CSS media queries to detect the screen size(pixels) of the device the user is navigating with.
Just standard medias. Example:
#media (max-width: 1199px){
/*code*/
}
#media (max-width: 991px){
/*code*/
}
#media (max-width: 767px){
/*code*/
}
When I test my website with my mobile, which is a Samsung Galaxy S4 with 1920x1080 pixels my website shows me the mobile version, which is in this case the #media query with a max-width of 767px.
I understand that most things would be too small to read or be seen if my mobile respected exact measures like 12px font size.
So my question is, how do I control which version of my website is shown on high resolution devices, because pixels media queries aren't working in my case.
#media (max-width: 1199px){
/*code*/
}
The max-width property in the media query works a little different. It is not the resolution of the screen. It is equivalent css pixel.
Here are a couple of articles.
A pixel identity crisis.
A pixel is not a pixel is not a pixel.
moz media query page.
If you want to target device resolution you should use
#media all and (max-device-width: 320px) {
}.
max-device-width:This property measures the device-width. If you write css using media query using this it will get a little complex (mobiles tabs and even desktops can have 1080p resolution screens). In order to target device resolutions you might have to look into properties like -device-pixel-ratio , orientation and device-height to give better control of layouts
The problem might be that you didn't include a viewport meta-tag
<meta name="viewport" content="width=device-width">