CSS
<link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="example.css">
what is the use of media="screen and (max-width: 480px) in this css attribute. Is this related with #media only screen (max-width: 480px) in css body. Please explain about this. I can't really understand.
If yes,
CSS
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
#media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width:8.33%;}
}
#media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width:8.33%;}
}
I have three formate for mobile, desktop and tablet in my CSS body. In this type how will I put it. Do I need to put multiple media tag in my css attribute.
Yes, its related.
You can use media queries in few ways.
You can declare some stylles in CSS body as You writed:
#media only screen (max-width: 480px)
Or You can specife in html which .css file will be used in which situation:
<link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="example.css">
So You can use media queries in multiple ways.
I suggesty You, when You have several lines of css code to put in media - use this inline form in css body. When You want to put some big amount of code -it's better to refactor this to different files. The code will be more clean and decent.
Related
Due to my vague understanding of tools I am using I failed to identify the source of the problem. node-sass does not provide media-queries aggregation, but css-mqpacker does, that is where I had to look for the problem resolvation. https://github.com/hail2u/node-css-mqpacker/issues/49.
What would be your way out of the following situation.
I merge two partial .scss files by #importing them to base file. Each file has media queries, and they provide styles for respective element of a page.
/* contents of index.scss */
#import "_block.scss", "_block-2.scss";
First file introduces two breakpoints, and order of appearance for these breakpoints in sass compiled stylesheet is defined by order in this file.
/* contents of _block.scss */
.block {
#media (max-width: 500px) {...}
#media (max-width: 450px) {...}
}
The #import of the second file has the same set of breakpoints plus one for max-width: 550px.
/* contents of _block-2.scss */
.block-2 {
#media (max-width: 550px) {...}
#media (max-width: 500px) {...}
#media (max-width: 450px) {...}
}
Identical breakpoints are aggregated during compilation, but a new one is placed at the end of compiled stylesheet, overriding properties for all breakpoints for particular element, which is not desirable behavior.
/* stylesheet compiled by sass */
#media screen and (max-width: 500px) {
.block {...}
.block-2 {...}
}
#media screen and (max-width: 450px) {
.block {...}
.block-2 {...}
}
#media screen and (max-width: 550px) {
.block-2 {...}
}
What would be a right solution?
This example represents a project where I cannot import second file before the first one because it introduces another problems with overriding.
I ended up defining style specifically to order all existing breakpoints, and introducing it early, but it is a hack I do not like at all, so I still in need for elegant solution.
It concerns me whether there is a use for media queries nested in CSS rules if it leads to such implications. In desktop first and mobile first media queries order matters, but I do not have sufficient control of it even in this simple case.
.block {
background-color: lightblue;
}
#media screen and (max-width: 500px) {
.block {
background-color: lightgreen;
}
}
#media screen and (max-width: 450px) {
.block {
background-color: lavender;
}
}
Also see https://www.w3schools.com/css/css_rwd_mediaqueries.asp
I added your current setup & and a suggested solution.
This is assumed you really need to run the 2 css files in the order you explained. It is also assumed that you want to keep as-is but have the final result working.
Since you might (for some reason) not want to delete the original values in CSS, you will have to set the ones you do not want to use, to transparent. That is background-color original default.
As a second step you need to decide which max-width you really want. When you know that you can secure the system uses that by adding "!important".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* Current setup */
#media (max-width: 500px) {body {background-color: red}}
#media (max-width: 450px) {body {background-color: blue}}
#media (max-width: 550px) {body {background-color: green}}
/* Solution */
#media (max-width: 500px) {body {background-color: transparent}}
#media (max-width: 450px) {body {background-color: yellow !important;}}
#media (max-width: 550px) {body {background-color: transparent}}
</style>
</head>
<body>
test
</body>
</html>
I am having an issue that I can't find an answer. I am using the #media code below and it works when I use inline CSS, but when I remove the inline code and add it to a CSS file it stops working.
Here is what I am using to test it.
#media all screen and (max-width: 480px) {body{font-size: 8px; }}
#media all screen and (min-width: 481px) and (max-width: 768px) {body{font-size: 28px; }}
#media all screen and (min-width: 769px) {body{font-size: 38px; }}
Any ideas why it stops working when it is added to an external CSS file??
Most likely you need to add the following in the <head></head> section of your html file.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
replacing mystyle.css with the name of your external css file.
...and in your css file something like:
body {
#media all screen and (max-width: 480px) {
font-size: 8px;
}
}
I have searched and searched and I can not seem to find a reason why my html meta tag is not working on my iPhone. You can visit my website at http://hadenhiles.mooo.com. If you resize the viewport (window) you will see that my site responds totally as expected... however when you view it on a mobile device you get a result that looks as though it is a desktop version. here is the head tag and it's contents:
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
As you likely have noticed I use my own stylesheet as well as the bootstrap3 stylesheet. I know I should likely stick to one or the other when it comes to layout but I made this website using only my own media queries before I was introduced to bootstrap. I only use bootstrap in the footer and for popups/navbar features. Anyway bootstrap is not the issue. It seems as though the meta tag is not recognizing the device width and is not setting the initial scale to 1.0. I have tried varying the min-width of my queries to debug but had no success. Here is are my css media queries:
/* Main css */
#media only screen and (min-width: 1px) and (max-width: 320px){
/* content */
}
#media only screen and (min-width: 321px) and (max-width: 600px){
/* content */
}
#media only screen and (min-width: 601px) and (max-width: 768px){
/* content */
}
#media only screen and (min-width: 769px) and (max-width: 1020px){
/* content */
}
I have tried switching from #media only screen and to #media screen as someone suggested in another question but had no success either. At first I thought that the min/max width was too big/small for mobile devices so I changed that and nothing happened. I have had this problem for about 3 months now so I decided to publish my own question. Any help you can give me is much appreciated.
~Haden
So this isn't exactly defining what's going on, although I do think that it is due to min and max conflicts. Try setting only max-width since that seems to be covering everything. It seems redundant to say min-width is 1px and max width is 320px and then for the next media query to be 321px. If you set the max-width to 320px, it will cover that range. If you set the next one to 600 pixels, it will cover the 320-600 range, etc.
#media only screen and (max-width: 320px){
/* content */
}
#media only screen and (max-width: 600px){
/* content */
}
#media only screen and (max-width: 768px){
/* content */
}
#media only screen and (max-width: 1020px){
/* content */
}
Alternatively, you might try using min-device-width and max-device-width. Here's a link to a decent resource on media queries for standard devices.
I need to float a div to the left when on the portrait mode via iPad. No matter what code that's inserted, nothing changes. Here's what I'm doing:
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.logos{
float: left;
}
}
The site I'm working on: http://rachelsilberman.com/rob-anolik/
The "logos" div pushes down when someone is on the iPad, and I need it to float left so it will align with the contact div.
I've been using ipadpeek.com to view the outcome since I don't have one myself. Hopefully that doesn't make a difference.
Thanks!
You should be adding the attribute to your ipad css like below:
#media only screen and (min-device-width: 768px)
and (max-device-width: 1024px) and (orientation:portrait) {
.logos{
float: left;
}
}
GENERAL RULE FOR CSS FOR IPAD IS LIKE BELOW:
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
I figured it out tonight. This may help others. I had to comment out the following line in my library.php file:
<!--<link rel="stylesheet" href="<?php echo get_template_directory_uri()?>/css/tablet.css" type="text/css" media="screen and (min-width:640px) and (max-width:1023px)" />!-->
After this, everything referred to the main style.css sheet which I wanted. I included two statements:
#media only screen and (min-width:641px) and (max-width:1023px) and (orientation:portrait) {
and
#media (max-device-width: 600px) and (orientation: portrait) {
Due to the issues I was observing on a Blackberry Playbook versus an iPad, I had to introduce the second #media line. I simply tweaked the values within those sections of my style.css code and voila! Everything works finally.
Here's a great site on the different sizes for screens: http://nmsdvid.com/snippets/
Help me please.
It does not work in IE!
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<link rel="stylesheet" href="styles/global.css">
file global.css
body{ background-color:black}
#media screen and (max-width: 650px) {
body{background-color:red;}
}
#media screen and (max-width: 450px) {
body{background-color:green;}
}
But It works:
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<style>
body{ background-color:black}
#media screen and (max-width: 650px) {
body{background-color:red;}
}
#media screen and (max-width: 450px) {
body{background-color:green;}
}
</style>
may have other solutions?
According to the homepage of the css3 mediaqueries support script you are using, it only supports inline scripts, and not external and imported scripts.