I'm working on a responsive website.
The logo image size will change as of on different screen size devices
the html part
<div class="logo responsive-img">
<img id="logo-header" src="assets/img/logo2.png" alt="logo" />
</div>
the media css
#media (max-width: 360px) {
/*Logo*/
.responsive-img {
background-image: url(../img/logo-320.png);
width:200px !important;
height:28px !important;
}
.responsive-img img {
display:none;
}
}
#media (max-width: 480px) {
/*Logo*/
.responsive-img {
background-image: url(../img/logo-mobile.png);
width:300px !important;
height:42px !important;
}
.responsive-img img {
display:none;
}
}
I tested it on local desktop browser, chrome and firefox. When browser resized to 480 the logo image replaced. However when browser keep going resize to 360, the logo img won't change.
Short answer
Move your 480px media above the 360px media.
Long answer
That's because order of occurrence matters in css. If two rules have the same specificity and they both define the same properties, the one that comes after will override the one that comes before.
.apple {
color:red; //this gets applied first
}
.apple {
color:blue; //this gets applied second, which overrides the first
}
The same applies to media queries. In your case all your defined properties and rules are the same.
It works above 360px because the 360px media doesn't get applied and the 480px media does.
Your 360px media does work at 360px. It just so happens that your 480px media comes after it and also gets applied since the screen width is in fact less than 480px. So the 480px media will override the same properties that your 360px media defines.
Related
Let's say I did this:
#media only screen and (min-width: 1366px)
.someBg {
background-image: url('someBg_BIG.jpg');
}
}
Now override the background image like this:
#media only screen and (max-width: 480px)
.someBg {
background-image: url('someBg_SMALL.jpg');
}
}
Question: For devices below 480px - Will the css first override the class then load only the overridden image? Or will it first load both the images and then decide which one will have more precedence?
When you use #media only appropriate images will be loaded.
If resolution more than 768px (for example) only one image will be loaded. If resolution less than 768px only one image will be loaded too. But if you resize window from 800px to 500px both images will be loaded.
You can check it in Chrome inspector.
img {
width: 400px;
content:url("http://mnprogressiveproject.com/wp-content/uploads/2014/02/kitten.jpg");
}
#media screen and (max-width: 768px) {
img {
content:url("http://images6.fanpop.com/image/photos/34800000/Kittens-3-animals-34865509-1680-1050.jpg");
}
}
<img alt="">
You are using css #media queries which is used just to change styles according to screen size it doesn't effect anything to load.
So here if you use this css then both the images will load first and then show according to screen size.
you can try this
the css:
.somebg{
max-width: 1400px;
padding: 0;
margin: 0;
}
.somebg img{
width: 100%;
}
and in html:
<div class="somebg"><img src="URL HERE"></div>
Is it possible to set the size of the text depending on the width of a browser window?
For example when window-width is 1000, than text is 40.
And when the window- width is 500 than font size is 20.
If you are targeting fairly new browsers (>=IE10) and want the text to continuously adjust its size, you can try out the new CSS3 vw unit which is a length unit based on the width of the viewport. However, webkit currently doesn't update the length after it has been set, but this can be worked around by for example binding a resize event which resets the width. Correction: At least Chrome 35.0.1916.114 doesn't seem to have this problem anymore, but Safari 7.0.4 still does. The quirksmode article is apparently a bit outdated.
JSFiddle (with javascript fix for Webkit)
List of supported browsers as well as some other nifty units
Better list of supported browsers (thanks Ian)
Yes, you can do this using #media queries. For the examples you named, you would need the following
#media (min-width: 500px) {
body {
font-size:20px;
}
}
#media (min-width: 1000px) {
body {
font-size:40px;
}
}
That would define the font-size to 20px for a browser width of 500-1000px, and to 40px for a browser width of more than 1000px.
Note that if you want to add a style for the default font-size, you would need to define that style before the #media queries, otherwise the styles defined in the queries wouldn't override the default styles.
You may use media queries as others have pointed out, or you may use this Javascript plugin.
I will include the media queries explanation below just because:
#media (min-width: 1000px) {
body {
font-size:40px;
}
}
This code will change the font size when the window is bigger than 1000px.
Here is a JSFiddle
This question is also a duplicate of many others I've seen...
/* Base size (for mobile) */
body {
font-size: 10px
}
/* All devices when window is bigger than 500 */
#media all and (min-width: 500px) {
body {
font-size: 20px;
}
}
/* All devices when window is bigger than 1000 */
#media all and (min-width: 1000px) {
body {
font-size: 40px;
}
}
There are several jQuery libraries that will achieve this.
With these the width of your text is usually updated on window.resize()
FitText
SlabText
hatchshow
BigText
I'm trying to work out how to use EM media queries in my latest project. However after some testing I've found that the media queries are ever so slightly off and I can't work out why. It might have something to do with it using the parents font size instead of the body. My body is set to 14px and my workings out look like:
$break-small: 22.8571em; //320px
$break-smallish: 40em; //560px
$break-med: 54.8571em; //768px
$break-medish: 68.5714em; //960px
$break-desk: 73.1428em; //1024px
body font size:
body{
font-size: 14px;
line-height: 1.5;
min-height: 100%;
}
*(from my SCSS breakpoint variables) From what I understand I did: 768 / 14 (base font size) = width in em's
Say I've a div called header, there is no font-size set on this div, only children of this div. Surely it would still then use the body font-size?
Ems in media queries are never based on the font size of body, or any other element for that matter. They always refer to the default font size set by the user in the browser preferences. In most browsers this default font size is around 16px, and in CSS this corresponds to the initial value of the font-size property which is medium. From the spec:
Relative units in media queries are based on the initial value, which means that units are never based on results of declarations. For example, in HTML, the ‘em’ unit is relative to the initial value of ‘font-size’.
This same default font size is inherited by the root element, which is html, not body (see here). Specifying a relative font size on body just means body bases its own calculation on the computed font size of html. This being stated, note that setting font-size on html will not affect how ems are calculated in media queries either.
Your guesswork is correct, the em unit sets the font size relative to the parent element's font-size, not relative to the document root. If you're looking for the latter you're looking for the rem unit, but browser support might be a problem for you, depending on your application.
See the following Fiddle for a sample: http://jsfiddle.net/afp46/
HTML:
<span >This is text</span>
<div><span >This is text</span></div>
<span><span>This is text</span></span>
CSS:
body {
font-size: 14px;
}
div {
font-size: 16px;
}
span {
font-size: 1.2em;
}
I would change that to body font size 100% and then you have the flexibility of EMs and %s site wide
I would highly recommend you do font-sizing with rem, which stands for "root em". It's much more consistent. Read more about it here: http://snook.ca/archives/html_and_css/font-size-with-rem
Also, I would recommend adding this to your CSS:
html {
font-size: 62.5%;
}
Now, your rems or ems will be easy to convert. 10px font-size would be 1rem or 1em. Nice, right? :) Again, use rems, its a much better practice these days.
Please try this code. I have already used this my last project it working in fine. so please try.
// Small screens
#media only screen { } /* Define mobile styles */
#media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */
// Medium screens
#media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */
#media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px. */
// Large screens
#media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */
#media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px */
#media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */
#media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px */
// XXLarge screens
#media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */
I have a css code like this:
#charset "utf-8";
/* long code just an example of top */
.show_hide_top a.showLink { /* small red link */
left: 39% !important;
padding-left: 8px;
top: 15% ;
}
#media only screen and (min-width: 1300px) and (max-width:1500px) {
/* long code for these devices ex: */
.show_hide_top a.showLink {
left: 39% !important;
padding-left: 8px;
top: 18% ;
}
}
#media only screen and (min-width: 769px) and (max-width:1299px) {
code for these devices
}
#media only screen and (min-width:481px) and (max-width: 768px) {
code for these devices
}
However, my computer (1600) picks up the media code for the 1300-1500.
Something (probably silly) is wrong.
Thank you so much for your opinion.
Media queries like this don't target devices, they target the width of the browser viewport in pixels. #media only screen and (min-width: 1300px) and (max-width:1500px) was being picked up because your browser's viewport was in between 1300 pixels wide and 1500 pixels wide.
To demonstrate this idea better, try resizing your browser window and watch the different media queries being applied and removed.
When I was using media query, firefox was not recognizing a generic id like #upper.
Example:
<div id="container">
<div id='left"> content here </div>
<div id="center">
<div id="upper"> content here </div>
...
</div>
<div id="right">content here </div>
</div>
As soon as target #center #upper in the CSS, the media query worked ONLY for the target media and not as a generic rule.
Only #upper? Nope... It was reading and applying the media query for all devices, overwriting the generic CSS.
At first, toggling between min-devide-width and min-width seemed to work, but the problem persisted. So this is the permanent fix.
Make sure to use both full path in the generic CSS and in the media query.
I want to get the screen width as a variable for a simple if statement. Basically if the screen is > 768 it will display the normal website. If it's < 768 than it displays a more compact version. It's just a little fix for ipad resolution. I already know how to update the webpage once i get the info, just how do I get the values in the first place?
use javascript..
there is a property called
.screenwidth()
here is a link:
http://www.w3schools.com/jsref/prop_screen_width.asp
You could use CSS media queries:
#media all and (max-width: 768px) {
body {
background: #ccc;
}
}
Further reading:
http://css-tricks.com/css-media-queries/
You need CSS3 media queries
http://www.w3.org/TR/css3-mediaqueries/
http://webdesignerwall.com/tutorials/css3-media-queries
/* Any CSS for bigger screens / default CSS goes outside the brackets */
div {
/*here*/
}
p {
/*or here*/
}
#media screen and (max-width: 768px) {
/*css specific to small screens under 768px width here*/
div {
/*here*/
}
p {
/*or here*/
}
}