Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
i am facing a problem. I have a simple wap-site http://tornet.ml. On mobile devices, the site is perfect; but when browsing it on a PC, the images appear atrocious. I am using relative sizes (%) instead of absolute (px) to resize images, as it changes according to the screen. Is there any way to make these more perfect than they already are?
Any help would be really appreciated.
You are facing a problem, where you would like the layout of your site to change depending on what kind of screen it is shown in. The layouts which are able to do so, are called adaptive or responsive layouts and it can be done with some advanced CSS knowledge.
Check this fine article: http://www.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/
Of course, there is no real need to implement everything on your own - there are many different frameworks to choose from.
Check this list for starters: http://www.awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks-for-web-design.html
However, a simple workaround for your particular case would be just to limit the width of your content, so it won't stretch on laptops/pcs. To see what I'm talking about change your <body> tag to <body style="width:500px;">.
You can consider using something called Media Query which allows you to have different stylesheets for different devices used to access your website. Inside a <style> tag, you can write something like the following:
#media screen and (min-width: 400px) {
h1 {
background: black url('test.jpg') no-repeat 50% 50%;
}
}
which means that the stylesheet is applicable only to screens greater than of width 400px.
You can also specify external stylesheet using the following syntax:
<link href="screen.css" rel="stylesheet" media="screen">
<link href="desktop.css" rel="stylesheet" media="screen and (min-device-width: 480px)">
And in the former stylesheet, add CSS for desktops and in the latter one, usually for mobile devices. For more on Media queries: http://www.w3.org/TR/css3-mediaqueries/
Also, try not using % rather than pixels, use pixels but change them according to the device being used.
Related
I'm new to web design and trying to make my site laptop friendly. I decided to use media queries to pull up different stylesheets as the window sizes change. This works great with Chrome and IE but Firefox uses the stylesheet I've written for laptops regardless of whether I pull it up on my laptop or my 1080p monitor.
This is the media query I'm currently using.
<link rel="stylesheet" media="screen and (min-width:1200px) and (max-width:1600px)" href="styleslaptop.css" />
I've already checked all my extensions and none of them are making a difference.
Any help would be greatly appreciated.
Change your link to:
<link rel="stylesheet" href="styleslaptop.css"/>
Then open styleslaptop.css and at the bottom of the file add this:
CSS
/* ----------- Non-Retina Screens ----------- */
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
PUT YOUR CSS RULE SETS THAT ARE EXCLUSIVELY FOR LAPTOPS HERE
}
/* ----------- Retina Screens ----------- */
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
PUT YOUR CSS RULE SETS THAT ARE EXCLUSIVELY FOR LAPTOPS HERE
}
I got the media queries from this article: Media Queries for Standard Devices
The best way to determine your breakpoints is by design not by device, but if your site is not that complex, cookie cutter should suffice.
UPDATE
Upon inspection of your 2 stylesheets I believe I know why the laptop CSS doesn't work in Firefox. At the end of both stylesheets you employ a rarely used at rule: #-moz-document url-prefix() {} This rule targets specific pages with the prefix(http://example.com/path/). An explanation of #document rule is here. There's two minor problems and one major problem with this:
The #document rule is only supported by Firefox.
If you really want to use this useless rule, then you should put a url in the parenthesis ex. #moz-document url-prefix(http://example.com/path)
So right now on the desktop CSS the properties and values that are in that rule set apply to all pages IF your'e using Firefox. Now on to the major problem.
On your laptop CSS you are missing the closing bracket of the #document rule set. This explains why you see a big difference in Firefox and why the media queries I gave you didn't work. To fix this simply go to the very bottom of your laptop CSS and place a }. You should now see Firefox the way you expected it to look, but keep in mind there are some extra rules in the dektop CSS:
#testimonialscontent h2 {
padding-top:0.25%;
padding-right:0;
font-size:1em;
}
body {
background-color:white;
}
FURTHER ADVICE
It's good that your'e taking the time to learn esoteric things, but be aware of how other developers do things as well. There's a slew of useless properties and rules that are too specific in purpose or to narrow in compatibility. Most but not all of them have vendor prefixes -moz, -webkit, etc. These are for the most part experimental, partially supported, and/or limited in some way, so remember Caveat emptor. So when you want to use something you don't see used very often or something with vendor prefixes, go to: http://caniuse.com/, a search will yield info such as which browsers support a property, element, etc.
On the stylesheets, one should try to use one stylesheet that has all of your custom styles. You should use your desktop CSS as the core rules, then place all of the new rules (not all of the rules) you have for the laptop and put them at the bottom of the core rules (desktop CSS), then put them inside the media query as I originally explained. The reason why you need to minimize the number of external files (not just .css but .js as well) is because they incur an extra HTTP requests, see this: Seven Mistakes that Make Websites Slow.
Good luck, sir. If I helped, don't forget to click that green checkmark and I if really helped helped you out, click that upvote arrow as well . ;)
Put your media queries inside your css file..
Link like this
<link rel="stylesheet" href="styleslaptop.css" />
And in your css wrap everything between
#media screen and (min-width:1200px) and (max-width:1600px) { /* your css here */ }
I know there are 2 ways to add Media queries:
HTML LINK:
<LINK REL="stylesheet" TYPE="text/css" MEDIA="(max-width: 1024px)" HREF="foo.css">
CSS:
#media all and (max-width: 1024px) {
......
}
I have read the documentation and I understand the obvious difference between the 2 methods. However, the following are 2 questions I am in doubt about if you can clarify please:
Does the browser handle the HTML Media Link differently to the CSS Media Query? What I mean is, I know if CSS media queries are added inside css, all the css files are downloaded to all devices anyways and only the respective media queries are taken into effect when the browser interprets the compiled css. But if the Media Link is added in HTML, does it mean that browsers will only download the foo.css only when for devices with matching specified width? Is there a difference in the way browser handles the HTML media links when compared to Css media queries or is it all the same but just different ways of adding to the webpage?
Lets say if foo.css also has media queries for smaller widths other than 1024px, something like this:
body {
padding: 10px;
}
#media all and (max-width: 900px) {
body {
padding: 5px;
}
}
#media all and (max-width: 800px) {
body {
padding: 0px;
}
}
If the above file is added using HTML Link like this:
<LINK REL="stylesheet" TYPE="text/css" MEDIA="(max-width: 1024px)" HREF="foo.css">
Would this become nested media query the way browsers look at it? What I dont understand is, if the above is added using html link, I dont know if the browser will actually look at it like this which becomes invalid:
#media all and (max-width: 1024px) {
body {
padding: 10px;
}
#media all and (max-width: 900px) {
body {
padding: 5px;
}
}
#media all and (max-width: 800px) {
body {
padding: 0px;
}
}
}
So my question is, if I have further media queries inside the css file that is added using HTML media link, is that valid?
EDIT:
I had a look in the developer tool using chrome from my desktop and I can see that the tablet files are downloaded even when browsed from a desktop device:
So for question 1, is it safe to assume all browsers included older ones and mobile browsers do the same thing i.e download all files even if they are placed at HTML links?
For question 2, I can see that chrome does use the media queries that are inside tablet's css when the browser screen is resized to tablet width. The css file linked for 1024px in html are taken as media="(max-width: 1024px)". But then, wouldn't that mean the media queries placed inside tablet's css file are actually nested media queries? Although it works, isnt it logically wrong? Does some stricter browser not consider this as valid?
Here is what W3C has to say about this:
The media attribute says which media the resource applies to. The
value must be a valid media query.
[...]
However, if the link is an external resource link, then the media
attribute is prescriptive. The user agent must apply the external
resource when the media attribute's value matches the environment and
the other relevant conditions apply, and must not apply it otherwise.
Note: The external resource might have further restrictions defined within
that limit its applicability. For example, a CSS style sheet might
have some #media blocks. This specification does not override such
further restrictions or requirements.
I tested the behavior in Chrome using the following markup:
<link rel="stylesheet" href="ge-960.css" media="screen and (min-width: 960px)">
<link rel="stylesheet" href="lt-960.css" media="screen and (max-width: 959px)">
Apparently, Chrome downloaded all CSS files regardless of screen resolution.
However, it applied the rules from matching stylesheet(s) only
And it honored all matching #media rules within the stylesheet
Regarding the stylesheet download, here is what the current spec draft says:
User agents should re-evaluate media queries in response to changes in the user environment, for example if the device is tiled from landscape to portrait orientation, and change the behavior of any constructs dependent on those media queries accordingly.
This means you can’t just evaluate each media-query and then download the appropriate stylesheets because the environment can change, causing the re-evaluation of these media-queries. I think it could be optimized, but for now all browsers download all stylesheets, regardless of media-queries.
For your second question, specs don’t mention any difference between HTML- and CSS-declared media-queries. Nested media-queries are allowed since CSS3, and putting #media-rules in a stylesheet which is already tagged with media="…" should be the same as a pure CSS nested media-query.
With HTML media queries, the CSS files are downloaded whether or not the media query is satisfied or not. But the prasing of unwanted CSS is kind of deferred and this advances your initial render. In a way, you can think of making it, non-render blocking. But with CSS media queries, they are completely parsed and processed whether or not the query is satisfied.
I'm just wondering if it is possible to target a tablet without using media queries. The reason I ask this is that I already using media queries but I have images that are grayscale on desktop and when hovered they change to the original colour. I have removed the grayscale when the device hits a certain size so it is fine on smaller tablets and mobiles but it is just a bit too small for the ipad and certain tablets when they are landscaped.
Is there any way to target the tablet to turn the filter off without touching the media queries?
Thanks in advance
The website in question is www.garethjweaver.com
Have a look at the Mobile ESP framework; specifically the JavaScript one. It can detect individual devices or groups of devices such as tablets.
http://blog.mobileesp.com/
The method most pertaining to what you want to achieve is:
MobileEsp.DetectTierTablet();
It also allows you to pick specific groups of tablets by OS:
MobileEsp.DetectAndroidTablet();
MobileEsp.DetectWebOSTablet();
MobileEsp.DetectIpad();
MobileEsp.DetectMaemoTablet();
MobileEsp.DetectBlackBerryTablet();
MobileEsp.DetectOperaAndroidTablet();
A possible usage scenario:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://www.hand-interactive.com/js/mdetect.js"></script>
<script>
$(function() {
if(MobileEsp.DetectTierTablet()) { // if its a tablet this will be true
$("html").addClass("isTablet"); // this will add the isTablet class to the HTML element
}
});
<script>
The example above uses jQuery, which will make things easier for you if you are getting started with JavaScript. With that in place you just need to set up rules for your tablets in your stylesheet like this:
<style>
body {
max-width: 1200px;
}
.isTablet body {
max-width: 100%;
}
</style>
It also has other versions for ASP.NET and PHP so you can do the detection server side.
Here's a fiddle illustrating the functionality outlined above:
Fiddle
I get that you don't want to touch the media query, but as far as I can see it feels like your problem can be solved by
#media (orientation: landscape) { ... }
You want to determine if it's a landscape view..right?
about other usages of media query MDN:media query
if you really don't want to touch it, there is another option is to use javascript. But I think that will be make things more complicated.
Hope my answer helps..:)
I am currently using media query in my css but my site is still looking bad. Is there a way to determine first the witdh of a browser and then load different index files?
To post some code here is my media query:
#media screen and (max-width: 600px) {
.topbar{
opacity: 0;
}
....
}
I would say do some more research on building your CSS but to answer your question:
<script type="text/javascript">
if (screen.width <= 699) {
document.location = "http://mobilesite.com";
}
</script>
It might be an idea to load different css files for different screen sizes; essentially moving the media selection from the css to the html:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="600px.css">
You might want to read Detect different device platforms using CSS for some related content.
Generally you want to aim to use the same .html file for your website, then use CSS to customise specifically for desktop or mobile. I know you may have very different ideas for the two sites, but it can all be done in pure CSS if your markup (html code) is good enough. Check out the CSS Zen Garden for how powerful CSS can be.
If you want to completely reset your css for the mobile site, just wrap the old css in a media query targeting screens screen and (min-width: 601px), and you will find your mobile site is completely unstyled
css has nothing to do with loading different index files according to the browser width.
If you want to style your elements differently using #media rules, make sure they are set close to the bottom of the page, in other words - after the main styles, because otherwise - they will be simply overwritten.
I have a few questions about css media queries.
I. Does both css files (for example normal.css and lessthan1024.css) have to include all css rules? Or can lessthan1024.css include just rules that are different?
II. Does it work with browser resize? Or does page have to be refreshed?
Thanks
I. Let's say you want to have a header with a blue background, no matter the resolution. If you include in your lessthan1024.css file only what is different, that means you won't have a blue background for the header at less than 1024px. So what do you think is the answer to your question in this case?
II. It works on resizing the browser window. No refresh.
That being said, I believe it would probably be better to:
I. Use a mobile-first approach - that means that you start with the smallest display sizes as being the norm and then you start adjusting the look of your page for larger displays
II. Put all CSS, for all display sizes in one file, using #media rules; example:
/* base styling: common rules + smallest display rules*/
#media only screen and (min-width: 35em) {
/* adjust style for larger display */
}
The reason I believe this is better is because... well, if you use 2 .css files, then you will have some rules duplicated. Let's say you want to change some of them. You'll have to make the same changes in 2 places. Maybe you forget to make the changes in one file. Or maybe you don't remember that you've set a padding to 1em in one file and you set it to 2em in the other file.