Attention: Possible duplicated from here (and I found more answers with the same solution) but it does not solve my problem.
Hello, I want to change color of some element when size of screen is different, here is my CSS rules they will told you all I hope:
#my_div {
height: 5px;
background-color: #08c5ef;
width: 100%;
}
#media only screen and (max-width: 1100px) {
#my_div {
background-color: red;
}
}
#media only screen and (min-width: 1200px) {
#my_div {
background-color: green;
}
}
It works in all browsers except Safari(5.1.7), the line always green. Can somebody help me? Maybe I wrote wrong media queries?
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
As there is no such mediatype as "only", the style sheet should be ignored by older browsers.
Safari(5.1.7) is quite old now, we are up to 8.0.5
this is 1 possible explaination
Related
I have used table layout, where I want to make td in a separate row for mobile.
I have used the media query as below
#media (max-width: 480px) {
td {
padding: 5px !important;
}
}
But it is not working, I have also tried it with screen as below
#media screen and (max-width: 480px) {
td {
padding: 5px !important;
}
}
and
#media only screen and (max-width: 480px) {
td {
padding: 5px !important;
}
}
None of the above worked to make it work on mobile.
I also tried applying background color to the body based on the media query, but it seems the media query is not getting applied on Gmail mobile app(Androind and iOS).
Please let me know if I am missing anything here.
Media queries aren't well supported in gmail, especially for mobile. You can see the level of support here -
https://www.caniemail.com/search/?s=media+queries
Is there a way to do this with html and css or can I only do it with javascript/bootstrap? I'm fairly new to coding so detailed explanations if possible would be nice!
You can do that with css media query. If you are begineer here is a small tutorial on that CSS media query.
According to mobile device size you can hide the navbar.
EXAMPLE:
#media only screen and (max-width: 600px) {
.navbar{
display:none;
}
}
You can hide show with the help of #media screen to show or hide the code in different devices sizes.
Examples:
#media screen and (max-width: 767px) {
.hide_on_mobile {
display: none;
}
}
#media screen and (min-width: 768px) {
.hide_on_mobile {
display: block;
}
}
Yes you can.
There several approaches to do that
Detect device is touchable (e.g. with Modernizr like tools) - I do not recommend, cause nowadays event laptops provided with touch displays.
By device's viewport - here's the good table list with most popular devices viewports by Adobe
I prefer second approach
So the solution comes in hand with CSS media-queries
And read about mobile first techniques
Example (press the Full page button after running snippet to look how it's gonna look in desktops)
<style>
#navbar {
display: none;
}
#media (min-width: 640px) {
#navbar {
background: lightblue;
height: 60px;
}
}
main {
background: #ccc;
min-height: 40vh;
}
</style>
<div id="navbar"></div>
<main></main>
They always say that min-width #media rule is the way to build for mobile first, I have read plenty articles about it but i still can't understand how exactly min-width rule works> But the max-width is easy and lends itself to easy comprehension.
#media only screen and (min-width: 400px) {....some rule here.....}
#media only screen and(min-width: 900px){......some rule here....}
my question and confusion is: can one used both breakpoint on the same stylesheets? and how does it make for mobile first ?
I need a tolerable responses please, no down voting for those who enjoy down voting please be tolerable and nice enough to help put.
Indeed its true using min-width helps to make a web mobile first.
Let us take an example.
We are creating a web that will scale to two viewports say 300px, 300px+ devices.
1) using min-width
body {
background: yellow;
}
// 300px+ devices
#media (min-width: 300px) {
body {
background: red;
}
}
Here background-color is been overridden for 300px+ devices
2) using max-width
body {
background: red;
}
// 300px- devices
#media (max-width: 300px) {
body {
background: yellow;
}
}
Here background-color is been overridden for 300px- devices
Now down the line in your App timeline you need to support 600px+ devices
3) using min-width
body {
background: yellow;
}
// 300px - 600px devices
#media (min-width: 300px) {
body {
background: red;
}
}
// 600px+ devices
#media (min-width: 600px) {
body {
background: green;
}
}
New media query added to support 600+ devices, no changes needed in the existing style sheet.
4) using max-width
body {
background: green;
}
// 600px- devices
#media (max-width: 600px) {
body {
background: red;
}
}
// 300px- devices
#media (max-width: 300px) {
body {
background: yellow;
}
}
Although we needed additional media-query rule to support 600+ devices, but we needed to change the global body background-color to support new breakpoint.
Now compare 1) with 3) and 2) with 4) ,
you will notice to support new breakpoint
for 1 to 3 we didn't need to change existing style rules, just added new rules over it.
but for 2 to 4 existing rules were modified to support new breakpoint
Summary
so min-width ensures future friendly and progressive enhancement (mobile-first)
but max-width leds to short-sighted approach and needs degradation (mobile-last)
I have issues with my media queries. It seems like they do not work in either browser. I tried in Opera, Chrome, Firefox. This is the page http://amatalents.com/about-us.html and those are media-queries for main div section
#media screen and (min-width: 150) and (max-width: 400) {
.windows div {
width: 100%;
display: table-column;
}
.windows div a {
font-size: 10px;
color: green;
}
.windows {
background-color: red;
}
}
I also validated the css file and first time it did fine and only mentioned the css parser error reffering to media queries part of the file, but the second time it referred to media queries only without mentioning parser error.
I am lost...
Please help!
You are missing px.
#media screen and (min-width: 150px) and (max-width: 400px)
I've created a page with tables of data that I want to be big enough to view comfortably on the screen but when it goes to print I want it to shrink down to fit on the page but when I change the size of the table, td's and fonts it wont work, the code works in chrome but not the other two browsers.
#media print{
.table6{
page-break-inside: avoid;
min-width: 500px;
max-width: 900px;
}
.table6 td{
font-size: 59.35%;
}
.th7{
max-width: 100px!important;
}
.th8{
max-width: 28px!important;
font-size: 58%;
}
}
The CSS works the print css works but only on certain elements and using certain attributes like display: none to hide navigation links etc.
According to http://caniuse.com/#feat=css-mediaqueries, CSS3 media queries are supported as of IE9 and Firefox 23.0
whatever you need to check compatability for, i highly suggest:
http://caniuse.com/css-mediaqueries
hope that helps
Solved the issue, when changing the width inside of #media print{} it can't override the values which exist in the regular css which is suitable for the screen, even when !important is called on it so I put the css for my table inside #media screen{} and it worked.
So if anyone has this issue with changing widths heights or size in general when printing in other browsers make sure your css is split up into #media print{} and #media screen{} otherwise it wont work in IE or Firefox.
(EDIT)
In firefox also if you want something to appear on the screen one way and print another you MUST have your styles for on the screen in #media screen{} if you leave it in the normal css print styles will never override the regular css. For example I had this inside the normal css but it was ignored in firefox when printing
.table6{
float: left;
}
So I had to put it like this
#media screen{
.table6{
float: left;
}
}