I am trying to understand the #media in CSS, and it seems that max-width has not relation with screen resolution, but the window size itself, here is the code:
#media (max-width: 2000px) {
div
{
width:100px;
height:100px;
background:red;
}
}
#media (max-width: 1000px) {
div
{
width:100px;
height:100px;
background:blue;
}
}
at zoom 100%:
but, at zoom 150%
I tried it on Chrome and Firefox, and the same thing happened.
So what is the right code to control the CSS independent of the zoom factor?
Don't look only at max-width, #media works in different way.
I learned how use it by following this great tutorial with examples:
[http://css-tricks.com/css-media-queries/]
Related
I tried to search but I didn't found suitable answer.
I want to create Canvas that users can draw on it.
But from what I read before there is no option to set canvas size in percent.
So I need to give it fixed value in px, so my question is:
Which width size will suite to all resulution without scrolling horzintally ?
Depends on the users who are going to use the canvas and what it is going to be used for. I would recommend the following:
#media (min-width: 300px) {
.myCanvas{
width:300px;
height:533px;
}
}
/*Large phone Size*/
#media (min-width: 600px) {
.myCanvas{
width:600px;
height: 1066px;
}
}
/*Tablet and Standard Size*/
#media (min-width: 1920px) {
.myCanvas{
width:1920px;
height:1080px;
}
}
Unfortunately, the above code won't work (which is a bummer) as the width and height need to be defined in the HTML tag, however you can still use these sizes for scaling purposes depending on who you're designing the canvas for.
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;
}
}
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.
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 have some problems with my responsive design.
I have 20 boxes like this
I want to do responsive with mediaqueries
#media screen and (max-width:960px) {
}
#media screen and (max-width: 783px) {
}
#media screen and (max-width: 524px) {
}
But I can't control the boxes in my design. JSFiddle
Try some solutions like these:
http://purecss.io/grids/
http://semantic-ui.com/
Or try adding a specific width to each box for each media query.
I just put these lines of code into the CSS area and it worked outstandingly:
#media screen and (max-width:1500px) {
.block {width: 250px}
}
#media screen and (max-width: 700px) {
.block {width: 100px}
}
If only the width needs to be responsive you can work with max-width and width in percentages. Like so: http://jsfiddle.net/bbwkc/3/
.block_main {
max-width:750px;
width: 75%;
}
And so on.