I have made sure the CSS file isn't cached and that the id/class names are correct. When I shrink my browser down to a size within that range it doesn't apply the CSS.
This is the CSS code:
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
{
#body2 .content
{
max-width: 690px;
}
#navWaypoint #header
{
width: 690px;
}
}
I haven't experienced this issue before.
If you are shrinking your browser windows to evaluate your code here is your answer.
min-device-width and max-device-width refers to display resolution.
While min-width and max-width refers to the size of the browser window.
Use min-width and max-width instead of min-device-width and max-device-width and hopefully you will get what you want.
Related
Hi am trying to apply the css when screen resolution is 1280*720 its not applied but when I manually enter width and height in google responsive check its working . Here is code of css
#media (min-height:720px) and (min-width: 1280px) {
.space
{
margin-top:24.5%;
}
}
You want it from 720px to 1280px then you have to use media query min-width:720px (i.e. from 720px) to max-width:1280px (i.e. less then 1280px) as below,
div {
width: 100px;
height: 100px;
background: #111;
}
#media screen and (min-width: 720px) and (max-width: 1280px) {
div {
background: red;
}
}
<div></div>
Scale your browser and see div background change.
On desktop systems, the size considered by media queries like min-height is the size of the content area of the browser, not the resolution of the screen. A system with a 1280x720 screen will not use rules in this media query unless the browser is in in full-screen mode, since some of the screen is being used for the browser toolbar and scrollbar, window decorations, a taskbar (on Windows) or menubar (on macOS), etc.
I'm trying to do a CSS for just my desktop, therefore i used the media query like below to link my css with my desktop.
My desktop resolution is 1440 x 900. Hence, my media query css for desktop is like this below
#media (max-width: 1440px) {
#loginpage {
position:relative;
margin-top:15%;
}
#headerbodyadmin {
position:relative;
margin-top:20%;
}
}
I tried used this method as well.
#media only screen and (max-width : 1440px){
}
Unfortunately, it's not working. I checked the various media query tutorial and this seems to be the correct way to implement css for my desktop resolution 1440x900.
May i know did i do anything wrong here?
Try adding one pixel to your max-width , #media (max-width: 1441px)
I checked the code and it working fine, make sure that you referenced id's in html page also.
Check this URL : http://jsfiddle.net/Ravichand/8kznk/
#media (max-width: 1440px) {
#loginpage {
position:relative;
margin-top:15%;
color:red;
}
#headerbodyadmin {
position:relative;
margin-top:20%;
color:skyblue;
}
}
I checked that and it works, here you can find example
http://jsfiddle.net/7VVsA/
#media (max-width: 1440px) {
#loginpage {
position:relative;
margin-top:15%;
background:red;
}
#headerbodyadmin {
position:relative;
margin-top:20%;
background:yellow;
}
}
Solution 01: Instead of max width. you can use min-width
Like
/*Sizes above 1024*/
#media (min-width: 1024px) {
}
Solution 02: Or you can try adding +1 to your width
Like
/*width 1441 to avoid any other conflict */
#media (max-width: 1441px) {
}
The width and height attribute describes the length for the view port and not the device screen resolution as device-width and device-height. If you use the width attribute it is possible that the considered value is smaller then your screen resolution width, because there is a border around the window or a scroll bar. Browsers on mobile devices usually utilize the entire width of the screen, so you don't see this effect there. Here what MDN says to the width attribute:
The width media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).
So if you want to trigger the styles if your device has a width resolution of 1440px I would use it like this:
#media (max-device-width: 1440px) {
/* your style */
}
You can read more about this in the MDN documentation. Maybe this question is also interesting.
Here is an example. If I, for example, set body to 70em and then adjust the browser width this rule
#media only screen and (min-width: 481px) and (max-width: 1024px)
{
body
{
background : #B0E0E6 url(img/bg.jpg) no-repeat;
}
}
is true when the width is between 481px and 1024px.
But when I have the width:70em given in body the content is not being adjusted when I make the width for the browser smaller.
If I now change a little and set the width in the body to be 80% now the content is automatically being smaller when the width of the browser is smaller.
It seems to me that it's not possible to both being able to catch when the browser is for example between 481px and 1024px and at the same time shall the content being able to be smaller when the browser width is made smaller.
So my question is if it's possible to both being able to catch when the width of the browser is between 481px and 1024px and at the same adjust the content automatically being adjusted when the width of the browser
You set the width to 70em. That's a fixed width (more or less considering it's based on font size). Within the media query you do not set the width anywhere. You just set the background. You would need to adjust the width of the object you want to resize within the media query. So if you have
body{
width:70em;
}
#media only screen and (min-width: 481px) and (max-width: 1024px)
{
body
{
background : #B0E0E6 url(img/bg.jpg) no-repeat;
width: 50em;
}
}
That would resize the body based on the media query that you specify. Also, you may wish to look up CSS units to make sure you want to use em (because by your description, % may work for your needs): http://www.w3schools.com/cssref/css_units.asp
I've literally wasted the entire day trying to figure this out.
When I resize my browser to anything of lesser width than 778px, the screen goes black. (any height works, just width doesn't configure)
What i would like to do is add a mobile #media setting that actually displays what I currently have!
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
any ideas what's wrong with my code? I've been rain-man'ing through my css..
Code: http://jsfiddle.net/jwrg5/
Much appreciated!
Here is a clinical example for applying media queries (Fiddle):
#media (max-width: 480px) {
body {
background: red;
}
}
#media (min-width: 481px) {
body {
background: blue;
}
}
The stylesheet functions as follows:
When your viewport is wider than 480 pixels, blue background is rendered
Narrower viewports are rendered red.
Note that there is a difference between using max-width and max-device-width. The latter gives you the maximum device width, which does not allow you to as easily test your queries by resizing your browser window.
I have a DIV in my HTML file with WIDTH: 2500px. That div carries horizontal flow of flow chart done with POSITION:ABSOLUTE. When i give browser print, it shrinks and reduces font size. But it shouldn't shrink and shouldn't reduce font-size as well. Please give me suggestions on this or give me some work-around.
Thanks,
Dinesh
Media queries are key.
#media print{
body{
font-size:16px;
}
}
Use
font-size in %(percent like 100% or 80%)While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.
or Use Media Queries
#media screen and (max-device-width : 320px)
{
body or yourdiv element
{
font:<size>px/em/cm;
}
}
#media screen and (max-device-width : 1024px)
{
body or yourdiv element
{
font:<size>px/em/cm;
}
}