I'm working on making my current design responsive. I started out using #media screen... but nothing in the design would change. I attempted using the html, div, p, a, li, td { -webkit-text-size-adjust: none; } to see if that would at least help the fonts change sizes (I'm using em), but nothing changed.
Then I switched to <link type="text/css".... I currently have 3 media query files linked in my HTML document and I'm using HTML5/CSS3.
My question is: Why is the document only referencing the first file? I took out the core stylesheet and am using nothing but directly targeted sheets to see if that would stop it from just using the first stylesheet, but it hasn't. The fonts haven't resized. The containers won't resize. The images won't resize or remove. Only the first stylesheet is referenced - the others are ignored.
These are my current linked stylesheets:
<link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 1280px)" href="scripts/css/style.css" />
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 800px)" href="scripts/css/style800.css" />
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="scripts/css/style1024.css" />
Edit: The stylesheet does change from one to the other, but the styles themselves don't change. It's like 1280 stylesheet is overridding all the others with its styles.
Maybe you're looking for max-width instead of max-device-width?
Former is for display area like the browser for example and the latter is the actual device area.
Also, you want to put the smallest one (800px in your case) at the end.
try this:
<link rel="stylesheet" media="only screen and (min-device-width: 1280px)" href="scripts/css/style.css" />
<link rel="stylesheet" media="only screen and (max-width: 1024px)" href="scripts/css/style1024.css" />
<link rel="stylesheet" media="only screen and (max-width: 800px)" href="scripts/css/style800.css" />
How do you debug them?
Try resizing the browser, these should work.
Also, I really dont suggest to use 800px, as iPad will also fall in it, you are better of using 767.
Related
First of all I know that this question was asked a lot before, but every answer was false or outdated.
Here is my problem: I want to load different CSS files based on device width. Here is the answer that is always given and that is false:
<link media="screen and (min-width: 721px)" rel="stylesheet" href="./cs/styles.css" />
<link media="screen and (max-width: 720px)" rel="stylesheet" href="./cs/styles-min.css" />
The problem with this answer is that the both files are loaded --->> both files are sent to us on HTTP request. Here is the proof on mozilla:
My question is how do I get only one to be loaded/sent to us on HTTP request. Btw I don't want to use js or server-side language if not necessary, if I really really have to, thats ok but give me reasons why your way is better. Thanks a lot!
Why don't you try using media queries in your css file. Only one css file is needed, and you specify when the screen size is smaller, then the style wrapped inside media queries will override
IE 9+, Firefox 3.6+, Safari 3+, Any Chrome, Opera 10+. Mozilla suggests starting the media attribute of the with “only” which will hide the stylesheet from older browsers that don’t support media queries. That may or may not be what you actually want to do… case dependent of course.
<link rel='stylesheet' media='screen and (max-width: 700px)' href='css/narrow.css' />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
<link rel='stylesheet' media='screen and (min-width: 901px)' href='css/wide.css' />link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css"/>
Are seen this ref : https://css-tricks.com/resolution-specific-stylesheets/
Demo : https://css-tricks.com/examples/ResolutionDependantLayout/example-one.php
I have the following and I want it to switch what stylesheet is used, but the last stylesheet defined is being used, the media query is not working.
Do I need to do something in addition to what I am doing?
<!-- iPhone -->
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 320px)"
href="/frontend/stylesheets/iPhone.css"/>
<!-- samsung -->
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)"
href="/frontend/stylesheets/samsung.css"/>
<!-- iPad -->
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 768px)"
href="/frontend/stylesheets/iPad.css"/>
Because of CSS Specificity and because your iPad media query is actually always going to be true (since the screen width on mobiles is always less than 768px). So it will override the rules/selectors you have in your other stylesheets.
You can try reordering you stylesheets the other way around (ie iPad lists first), but i would recommend you specify more explicit media queries to achieve what you want. Have a look at adding a min-device-width clause to your querys.
You can see an advanced example here:
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
I'm entirely new to the world of CSS, let alone media queries, so any help would be super appreciated!
I'm working on an assignment for school where we have to test our media queries and have a different style sheet for a variety of device sizes. I think I'm basically having the same problem as discussed on this post: Media Queries - Mobile vs Desktop Browser, but it's not clear to me how that commenter resolved their problem.
This is probably the relevant coding where the error lies, I think?:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--container div tag-->
<!-- Low res -->
<link href="colors2.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 128px)" />
<!-- Mid res -->
<link href="colors3.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 176px)" />
<!-- High res -->
<link href="colors4.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 240px)" />
<!-- Touch -->
<link href="colors5.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 320px)" />
The queries work on desktop browsers, but when I launch the page on Opera Mobile Emulator with (what I think are) the correct screen resolutions, they all take the default of the min-width 320px style. I've tried to add ", screen and (min-device-width:" to the tags as well, but for some reason, having both cancels the whole thing out and I end up with my basic HTML on a white screen. I've also tried doing the #media thing where I then post the styles below, but it seems like Dreamweaver 6 is rejecting them (???) because they get highlighted in maroon and, again, I get the white background.
So...I'd be very, very thankful for any help! And I should also mention that the very small min-widths are part of the assignment. I think they're all too small, personally! Thanks so much:)
Opera Mobile Emulator works very different from the real app.
I'd suggest you to test the site live in a mobile device.
I'm trying to use a couple stylesheets based on window size (phone or just very small desktop browser window). This works on neither. That is, I only see the style from 1024+.css Can someone help me out?
<!-- small display -->
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="resources/styles/small_device.css" />
<!-- widescreen -->
<link rel="stylesheet" type="text/css" href="resources/styles/1024+.css" />
Thank you
You code works as intended - it loads the first stylesheet on small screens and always loads the 1024+.css so the rules in the first stylesheet get overwritten every time.
Add a media query restriction for the larger screens as well
So I'm using an #media query to use a different css file on the mobile version of my site. Here's the head of my html:
<link rel="stylesheet" type="text/css" media="screen,projection" href="<?php bloginfo('stylesheet_url'); ?>" title="Simplr" />
<link media="only screen and (max-device-width: 800px)" href="mobile.css" type="text/css" rel="stylesheet" />
However, I'm finding that the mobile css just 'adds' to the desktop css, rather than having the desired effect of only loading the css rules in mobile.css. For example, having a single rule about the background color being red in mobile.css, won't just give me some unformatted web content with a red background, but will render the desktop css with a red background.
I want to completely start from scratch building up a nice, functional view of the site on mobiles with a blank css file, but I don't want to have to manually undo the many tweaks I've done to make the site nice for desktop. In particular, I'd like to be able to eliminate the chance of some stray desktop css preventing the site from rendering with the correct proportions on mobile.
Any thoughts?
<link media="only screen and (min-device-width: 0px) and (max-width:800px)" href="mobile.css" type="text/css" rel="stylesheet" />
<link media="only screen and (min-device-width: 801px) and (max-width:9999px)" href="<?php bloginfo('stylesheet_url'); ?>" title="Simplr" type="text/css" rel="stylesheet" />
Wrap your desktop css in a media query that targets desktops
Use your media queries in a conditional fashion like this:
#media screen and (max-width: 800px) {
<link to mobile stylesheet
}
#media screean and (min-width: 801px) {
<link to full stylesheet
}
Note that all platforms will use "#media screen", so you cannot do reliable device detection with the media type alone. Most commonly you will use the device-width to help you make educated guesses at what type of device the client will be.
Devices with high DPI are usually pretending they are smaller, so both the iPhone 3GS and the iPhone 4 (for example) can be matched with the same set of queries.
Whether you link "only screen and (max-device-width: 800px)" or build into your css " #media #..."
You need to envelope the "desktop" styles in order for the mobile to not recognize them at all.
so basically
only screen and (max-device-width: 800px) - for your mobile devices
and
only screen and (min-width: 801px) - for desktops
If you're putting your mobile stuff last, then you could add a CSS reset to the top of your mobile stylesheet.