I was curious what was going wrong here with my media queries. I just want one style for 'reasonably small screens' and one style for 'reasonably large screens'. So I did the following:
#media (min-width: 501px) {
#courtName {
font-size: 17px;
}
#courtInfoWindow {
font-size: 13px;
}
}
#media (max-width:500px) {
#courtName {
font-size: 64px;
}
#courtInfoWindow {
font-size: 40px;
}
}
I would expect the min width size to show on 'large screens' and the max width size to show on small screens (less than 500px). Yet, the smaller size is shown on all screen sizes. I've tried using just one media query to override a default size. Tried switching the order. Nothing is working. What gives?
before starting make sure you have following view port meta in your head section.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
After this
please note following
#media (min-width: 501px) { /** CSS HERE **/ }
This will work only on screen size larger than 501 pixels wide.
#media (max-width: 500px)
This will work only on screen sizes smaller than 500 pixels wide.
Related
I am trying to change font size according to screen size in my materialize.css. But it isn't working. What am I doing wrong exactly?
#media screen and (min-device-width: 600) and (max-device-width: 1500) {
h1{
font-size: 2em;
}
h5{
font-size: 14px;
color: green;
}}
Simply add px to value
#media screen and (min-device-width: 600px) and (max-device-width: 1500px) {
h1{
font-size: 2em;
}
h5{
font-size: 14px;
color: green;
}}
Please do add px to the widths such as 600px not 600.
Also, do put this meta tag at the top <meta name="viewport" content="width=device-width, initial-scale=1.0">
A meta viewport element gives the browser instructions on how to control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Im working on a mobile first site. The media queries are set with ems like so:
html {
font-size: 62.5%;
}
body {
font-size: 16px;
font-size: 1.6rem;
}
#media (min-width: 320em) {
}
#media (min-width: 600em) {
}
#media (min-width: 770em) {
}
I now need to add a max-width media query just below the same breakpoint as my middle media query, so that any screen size is either one or the other.
If I was working with px this would be easy:
#media (max-width: 599px) {
}
#media (min-width: 600px) {
}
Can the same be done with ems? Just to reiterate, I need it so any screen size will be in either the min or max media query. I cant have any 'no mans land' in between.
As its possible to have decimal places on ems I think the following wont work. A screen could be 599.5ems wide as so be in between the 2 media queries.
#media (max-width: 599em) {
}
#media (min-width: 600em) {
}
I've built a few sites with both min and max width media queries, and for me they've been painfully difficult to maintain and didn't actually add any value.
I like to use min-width queries for mobile-first sites, because it makes sense to me to think about my design from my smallest screen width first and then slowly add or change features as the width increases. This has the added bonus of eliminating the "no man's land" issue. See example: (thanks #IMI for calculating the pixel widths)
When you build a site like this, you end up specifying everything that changes from the previous query in each subsequent query, but behavior is also much more predictable as your screen will either fall into one category or the other, and whichever one it falls in, you know exactly what properties are being applied.
html {
font-size: 62.5%;
}
body {
font-size: 16px;
font-size: 1.6rem;
color:black;
}
#media (min-width: 20em) { /* = 320px */
body {color:red;}
}
#media (min-width: 30em) { /* = 480px */
body {color:green;}
}
#media (min-width: 37.5em) { /* = 600px */
body {color:pink;}
}
#media (min-width: 48.125em) { /* = 770px */
body {color:cyan;}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p> This is some random text.</p>
</body>
</html>
Yes, you can use decimals in your em based media queries.
The em values of the media queries will be based on the Browser's "initial" font-size value. This is typically 16px. So you are usually safe calculating your em based media queries by dividing the pixel value by 16.
Example: to get the em equivalent of #media (min-width: 600px) you would divide 600px by 16 which would result in 37.5 and a media query of #media (min-width: 37.5em)
No Man's Land:
If you have to mix min-width and max-width media queries it is best to use a max-width media query that equals the min-width of your next media query as stated in #maioman's answer and that should get rid of the "no man's land" gap problem. That way, a device with a max of 600px will use all your styles up to and including the max-width:37.5em styles while devices with have a higher resolution will use the following relevant styles including the min-width:37.5em.
Snippet Example of em based media queries with decimals:
html {
font-size: 62.5%;
}
body {
font-size: 16px;
font-size: 1.6rem;
color:black;
}
#media (min-width: 20em) { /* = 320px */
body {color:red;} /* You wont see this color since the max-width media query is overrides it */
}
#media (max-width: 37.4375em) { /* = 599px */
body {color:green;} /* Be careful where you place the max-width media query. It will override the smaller min-width if placed after. */
}
#media (max-width: 37.5em) { /* = 600px */
body {color:green;} /* As stated in #maioman's answer, using a max-width that equals the min-width of your next media query should get rid of the "no man's land" problem. */
}
#media (min-width: 37.5em) { /* = 600px */
body {color:pink;}
}
#media (min-width: 48.125em) { /* = 770px */
body {color:cyan;}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p> This is some random text.</p>
</body>
</html>
since min-width will override max-width if you do something like this you should be safe:
#media screen and (max-width: 600em) {
}
#media screen and (min-width: 600em) {
}
div {
width:5em;
height:5em;
}
#media screen and (max-width: 12em) {
div {
background:green
}
}
#media screen and (min-width: 12em) {
div {
background:red
}
}
<div>test</div>
fiddle
The “em” is a scalable unit. An em is equal to the current font-size, for instance, if the font-size of the document is 12px, 1em is equal to 12px. Ems are scalable in nature, so 2em would equal 24px, .5em would equal 6px, etc.
The size can be calculated from pixels to em using this formula: pixels/12(current font-size)=em
Check out http://www.w3schools.com/css/css_font.asp
In media queries “rem” as well as “em” don’t refer to the root element (html) but to the browser defaults directly which can only be changed using the browser settings for base font size. This means that even if you specify a font size of 30px on your html element, media queries will still use "user agent's (browser's) initial font-size" as “em” / “rem” based for the media queries unless you also change your default font size in the browser settings.
I will use(for the good of math):
"user agent's initial font-size" = 10px;
So let say you have:
#media (max-width: 59em) {
}
#media (min-width: 60em) {
}
When the browser compute the em that will be equal to:
#media (max-width: 590px) { // 59 * 10(supposed font-size)
}
#media (min-width: 600px) { // 60 * 10(supposed font-size)
}
Here you have a range of 10px where the screen could between the 2 media queries.
Probably you would say, I do a little math and solve the problem but to do math in css there is calc
like this:
#media (max-width: calc(60em - 1px);) { // 60 * 10 = 600px - 1px = 599px
}
#media (min-width: 60em) { // 60 * 10 = 600px
}
But unfortunately calc() not working within media queries.
But 1px = 0.1em 1 / 10(supposed font-size)
So you have to do the math a priori:
#media (max-width: calc(59.9em);) { // 60em - 0.1em(1px) = 59.9 * 10 = 599px
}
#media (min-width: 60em) { // 60 * 10 = 600px
}
So the only that you have to do is change the "10" to the "user agent's (browser's) initial font-size" and do the math a priori.
I hope this help you.
I have recently started toying around with responsive web design and have done a basic test here:
http://test.studev.net/
It works fine in a desktop browser however I am getting a little confused on how to deal with the smallest width design when loaded on a high resolution device for example retina displays on iPhones. Because of this type of display it means for example size 16px which is normal to read on a desktop is impossible to read on an iPhone 4/5.
How is this usually dealt with?
Well either if you want to make the text smaller on mobile or bigger you would do
#media screen and (max-width: 480px) {
font-size: 10px; /* Smaller */
}
or
#media screen and (max-width: 480px) {
font-size: 20px; /*Larger*/
}
And make sure you have this in your <HEAD> tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Or you can also disable zooming like so:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
And for IE10 support, try:
#-ms-viewport{
width:device-width
}
You can choose the size of the font according to the screen-width:
/* Large desktop */
#media (min-width: 1200px) {
font-size: 18px;
}
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) {
font-size: 16px;
}
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
font-size: 14px;
}
/* Landscape phones and down */
#media (max-width: 480px) {
font-size: 12px;
}
To make sure your layout stretch on the mobile screen you have to use the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1" />
This meta tag needs to be inside the head tag. The "device-width" will be the maximum pixels your screen can show. You can also set a constant value there (600px).
The initial-scale=1 means it will be zoomed automatically to 100%. (0.5 => 50%)
I'm redesigning my site to have two layouts based on screen resolution. One has 1000px for any screen 1010px or greater, and the other has 675px for smaller screens. Right now I'm using the following viewport tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
This setup works fine in desktop browsers and on an iPad. However, both Android and iPhone browsers do not show the page correctly, they start at various levels of zooms. Instead I want the 675px display to be shown zoomed correctly so the whole width is shown on the screen. I tried to use:
<meta name="viewport" content="width=675px, user-scalable=yes">
And it improves the iPhone version somewhat but forces the iPad to show the smaller size even though it has a 1024px wide screen. Not quite sure how to fix this.
Btw the site is http://dendory.net
Have you tried removing the initial-scale=1.0 and just have your viewport as:
<meta name="viewport" content="width=device-width">
and then use media queries for your break points in the design.
Try working with mediaqueries. It lets you target a device to apply certain css properties on. You just simply paste it in your stylesheet. I use it to create responsive emails.
Here is an example of a simple mediaquery:
#media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
I hope this helps !
You should try using #media queries. Simply apply these to your stylesheet and you can have total variable styles depending on the device, size and what you want to achieve with different devices.
e.g.
/* MOBILE PORTRAIT */
#media only screen and (min-width: 320px) {
body {
}
}
/* MOBILE LANDSCAPE */
#media only screen and (min-width: 480px) {
body {
}
}
/* SMALL TABLET */
#media only screen and (min-width: 600px) {
body {
}
}
In these you can simply apply different styles depending on the scale of the device as shown below...
/* TABLET/NETBOOK */
#media only screen and (min-width: 768px) {
body {
}
/* COLUMN GRID */
.g1,.g2,.g3 {display:inline; float: left}
/* 2 COLUMN GRID */
.g1 {width:48.0%}
.g2 {width:48.0%}
.g3 {width:98.0%}
}
/* LANDSCAPE TABLET/NETBOOK/LAPTOP */
#media only screen and (min-width: 1024px) {
body {
}
/* 3 COLUMN GRID */
.g1 {width:31.333%}
.g2 {width:64.667%;}
.g3 {width:98.0%}
}
This is very useful if you would like to have a fully interactive website for all devices. These days it is common practice to use media queries.
Also media queries are very transparent through most browsers which makes them a 'good practice' to use. Check this out!
I'm just getting into media queries, but this first issue is driving me crazy I've spent hours on it.
I've tried to following:
#media screen and (max-device-width: 480px) {
div.logothingy {
z-index: 100;
display:none !important;
}
}
#media (max-device-width: 480px) {
div.logothingy {
z-index: 100;
display:none !important;
}
}
#media screen and (max-width: 480px) {
div.logothingy {
z-index: 100;
display:none !important;
}
}
I load it at the end of my head file and when i look at it in firebug it's there.
Then I go to an object .logothingy and it is not even getting the styling when i reduce my window size down small. That is to say it's not even getting it and then being overwritten, it's just not getting it at all. Going insane. Please help.
Ok I'm even doing this:
.logothingy {
border:1px solid;
}
#media screen and (max-width: 480px){
.logothingy {
z-index: 100;
display:none !important;
}
}
and it's putting the border and not doing the rest of it.
I have this in the head
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Update2: I changed it to 780px and it works, but when it's at 480px it can shrink all the way down to nothing without getting the styling.
I had the same dramas and noticed that i had missed this:
<meta name="viewport" content="width=device-width">
in the head of my index page. Added it and media queries all kicked in.
This is the correct one
#media screen and (max-width: 480px){
}
Try to put inside only .logothingy instead of div.logothingy and let us know if worked