I am creating a two-column layout - left fixed, right fluid - and I'm using a media query to put the left column below the right (which is the main content) if the screen resolution is between 320 and 649 px (portrait or landscape).
When I test the layout to see how it responds to changing the width of the screen, it works just fine. However, when I start changing the height, at some point the breakpoint rule specified in the media query gets invalidated and the layout reverts back to the default.
I noticed that this point of invalidation is just when the height becomes equal to the width. For example, if I resize the browser (I'm using Chrome Canary developer console) to a width of 480px, everything works fine as per the media query as long as the height of the window is greater than 480px. The moment I resize the height to less than the width, say 479px, the rule in the media query ceases to hold and the layout reverts back to the original.
Here's an abbreviated excerpt of how the layout code looks:
HTML:
<div class="wrapper">
<div class="content"></div>
<div class="left_column"></div>
</div>
CSS:
.wrapper: {width:100%;}
.content
{
margin-left:240px;
float:left;}
.left_column
{
width:240px;
margin-left:-100%;
float:left;
}
#media only screen and (min-width: 320px) and (max-width: 649px) and (orientation: portrait) {
.content
{
margin-left:0;
float:left;}
.left_column
{
width:100%;
margin-left:0;
float:left;
}
}
#media only screen and (min-width: 320px) and (max-width: 649px) and (orientation: landscape) {
.content
{
margin-left:0;
float:left;}
.left_column
{
width:100%;
margin-left:0;
float:left;
}
}
I'm not sure what's causing this change in the layout when the height is altered since I don't have any media queries that specify height. Does anybody have any clue what the issue could be?
Managed to find the mistake - code for portrait query was different from that for landscape query.
Related
I am picking up an existing free template Jessicawhite at html5xcss3.com
I notice the images stretch 100% in any screen and in large screen (MAC wide screen for e.g.), it looks really ugly especially the home page slider.
I want to center the whole page/body if the screen is larger than the max size of my images (1280px, sized in the server) like in this site: igihe.com I tried playing with bootstrap-responsive.css. The highest screen it deals with is 1200px min.
#media (min-width: 1200px) {
}
My attempt was for screens with minimum 1400px:
#media (max-width: 1200px) {
//leave original intact
}
#media (min-width: 1400px) {
body {width:1366px; margin:0 auto;}
/* OR */
.body_container {width:1366px; margin:0 auto;}
}
As well, I just tried changing the min-width:1200px to min-width:1400px but it doesn't behave well either.
My issues are: it doesn't correctly react. My screen size is 1366px, which is less than 1400px yet it applies the body styles.
Need i add all the specs under each media to each screen size after words? Meaning, the min-width:1200px contains a bunch of specs. Does that mean each screen size has to define it?
Any shorter solution that puts the menu in consideration?
You can just use the simple css3.
use a wrapper division o wrap all your elements and this wrapper have a display:none; by default for all width of media.
.wrapper{
display:none;
width:your-width-num px;
margin-right:auto;
margin-left:auto;
}
And for the wider screens:
#meida(min-width:your-width-num) {
.wrapper{
display:block;
}
}
So I am facing problem with where I have 2 different mediaqueries where the width is same for each but the height is different like this:
#media only screen and (max-width:1920px) and (min-height:1080px){
#home{
height:1080px;
}
}
#media only screen and (max-width:1920px) and (min-height:1200px){
#home{
height:1200px;
}
}
But what happens is that when I change the screen dimensions to 1920px width with 1200px height it seems that this media query is not overriding the other one with a height of 1080px. For now I am stuck here and cant figure out the mistake I made. Whats the issue here ? Where am I going wrong ? what is the solution to this problem ? Thanks for your help !
The world 'screen' in the media queries is a little bit confusing. The actual meaning of it is not the computer screen resolution but the actual internal size of the browser window. Even when the window is maximized, to compute the actual height you should discount from the screen height the browser window caption address bar, system tray, etc., so if the screen resolution is 1200px then media query screen size will be something about 1180px.
The following code sample illustrates the concept. See it in full screen mode, try to resize the browser window and see how the color changes:
body{
background-color: yellow;
}
#media only screen and (max-width:1920px) and (min-height:500px){
body{
background-color: lime;
}
}
#media only screen and (max-width:1920px) and (min-height:800px){
body{
background-color: red;
}
}
I have a bar that spans across the page (100% width) with a child container inside of it that spans 80% of the parent container's width.
I have the following CSS media query that is supposed to increase the child container's width from 80% to 100%:
#media screen and (max-width: 900px), screen and (max-device-width: 900px){
#imagebar .container{
width: 100%;
}
}
However, using the dimensions given to me by my chrome developer tools, the query is taking affect at a width of 990px. Not 900px. This is occurring with all my media queries; they are all activating 80-100px earlier than they should be. Anyone know what might be causing this?
This is formatted wrong.
#media screen and (max-width: 900px), screen and (max-device-width: 900px){
#imagebar{
.container{
width: 100%;
}
}
}
should be:
#media screen and (max-width: 900px), screen and (max-device-width: 900px){
#imagebar .container{
width: 100%; }
If you want to call on an element inside another element, dont open both elements, just specify which element in which parent you want to edit or change.
You can try like this it will work for you
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {
your css here
}
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.
I am new to responsive web design and am attempting to hide a current large image and show a new small one when the screen width is less than 480px wide.
This seems to work well when I shrink the width of my desktop browser, but when I navigate to the page on my mobile phone it is still displaying the large image still.
The code I'm trying:
html:
<div id="wrapper">
<img src="lrgimg" id="lrgimg" alt="" />
<img src="smlimg" id="smlimg" alt="" />
<p>Some text , font size will change depending on device width.</p>
</div>
CSS:
#wrapper{
margin-right:0 auto;
margin-left:0 auto;
padding:10px;
width:80%;
border:1px solid red;
}
#smlimg{
display:none;
max-width:100%;
max-height:100%;
}
#lrimg{
max-width:100%;
max-height:100%;
}
/* media queries */
#media screen and (max-width: 480px){
#lrgimg{display:none;}
#smlimg{display:inline;}
p{
font-size:30px;
}
}
I assumed max-width was enough to satisfy most phone screen widths but apparently even though the screen widths have stayed the same the resolutions have increased hugely.
My question is: Is there a standard #media query that I can use that will satisfy most modern mobile phone browsers?
here is a demo
Depending on your screensize, 480px may still be too wide. (If the screen size IS 480, it won't break until #media screen and (max-width: 479px){ because a screen width of 480 is still included in #media screen and (max-width: 480px){
More statistics here: Mobile and desktop screen size statistics