Not able to apply media query to gmail - html

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

Related

CSS media query order issue

I am updating a text element which ID has if7ou.
Issue is that if user update style on mobile view first and then the tab view then media query do not work for tab view. If we update style for desktop first, tab second and mobile third then everything works fine
but if we reverse the step mobile view first, tab view second and desktop view third then css/media query will not work for tab and desktop view.
So I want any option that we can add css in any order either 480 first and 992 second or vice-versa css should be apply based on device size not the based on order on which they come.
#media (max-width: 480px) {
#if70u {
font-size: 20px;
}
}
#media (max-width: 992px) {
#if70u {
font-size: 40px;
}
}
I think it was due to 480 should be down and 992 should be above.
Any help would be appreciated, thanks!
I would suggest to use min-width instead of max-width. This will ensure that the 992px styles will not load or appear in your mobile view. It will also better satisfy the requirement of "mobile first", in that you are only loading mobile styles for mobile, and then adding tablet styles only when the viewport grows for tablet, and so on. This will also solve your issue.
#if70u {
font-size: 20px;
}
#media (min-width: 481px) {
#if70u {
font-size: 40px;
}
}
In general, I use max-width sparingly, and often, when I do need it, it's because I created some sort of crappy code that has consequences later on down the waterfall.
In this case you should use mobile-first technic, declarations on the main class apply to mobile, then you increase your media-queries to bigger devices, take a look:
#if70u{
font-size: 14px; //Its apply for mobile
}
#media screen and (min-width: 768px){
#if70u{
font-size: 16px; //Its apply for tablets
}
}
#media screen and (min-width: 992px){
#if70u{
font-size: 18px; //Its apply for small desktop screens
}
}
#media screen and (min-width: 1200px){
#if70u{
font-size: 20px; //Its apply for large desktop screens
}
}
In addition to #S. Dunn answer.
If you want to set a style to specific minumum and maximum width you can use this:
#media only screen and (max-width: XXXpx) and (min-width: XXXpx)
So in your case it would be:
#if70u {
font-size: 20px;
}
#media only screen and (max-width: 992px) and (min-width: 481px) {
#if70u {
font-size: 40px;
}
}

How is min-width media query rule s mobile first approach

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)

Media queries in my css do not work

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)

Media Queries not working at all whatsoever

I am in despair. I am trying to make a website and make it mobile-friendly and responsive, however, I cannot seem to get any kind of media query to work at all! All my sizes, width and heights are in "%/em" and my font-sizes are in "vw/em". The biggest problem I get is that, as the screen shrinks, so does my text, to the point where it simply becomes eye-straining to read! I don't see relevant to send any code but if need be, I shall send some of my code (my website is still offline and I cannot put it out there if this problem isn't fixed).
Here's what I have tried:
I have tried putting this in my tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
No success when I try media query in a tab or in a separate css stylesheet.
I have tried removing it aswell.
I have tried these media queries for my font-sizes:
#media (max-width: 400px) {
body { font-size: 60%;}
}
#media only screen and (max-device-width: 800px) {
body {
font-size: 80%;
background-color: blue;
}
}
#media (max-width: 1100px) {
body { font-size: 120%;}
}
I have also tried other media queries but absolutely NOTHING changes at all! Am I doing something wrong? Probably but what?!! This is leading to so many problems! I cannot change my header according to different screen sizes, I cannot change my display, my header links are a mess, etc.
Also, please note that I am a beginner and I do not use any javascript, bootstrap or whatever.
Thank you in advance for your help!
Your queries are a little weird. Perhaps with some logical constrains you can achieve what you are looking for? This is what I mean:
#media (max-width: 400px) {
body{
background-color: yellow;
}
}
#media (min-width: 401px) and (max-width: 800px){
body {
background-color: blue;
}
}
#media (min-width: 801px) and (max-width: 1100px) {
body {
background-color: purple;
}
}
#media (min-width: 1101px){
body{
background-color: orange;
}
}
In my humble opinion, setting the intervals using both min-width and max-width help me visualize what's going on better. This pen shows the colors changing whenever you change the width. It doesn't do much good, but it's something to get started with media queries.
EDIT:
Pen contains transitions between colors because cool
Usually, it's better to use media queries based on minimum screen width. Here is an working example with the code you posted:
Codepen: http://codepen.io/anon/pen/eNJXXp
#media (max-width: 400px) {
p { font-size: 60%;}
}
#media (min-width: 400px) {
p {
font-size: 80%;
background-color: blue;
}
}
#media (min-width: 800px) {
p { font-size: 120%;}
}

What is the "correct" logical way of building good responsive design with CSS3?

So I've dived into 'Responsive Design' and have gotten a fair understanding of how this works. However there are specifically two things I need to get my head around.
My "logical" way of thinking is like this: If screen size is less than 320px, then do A, if screen size is less than 480px do B.
#media only screen and (max-width: 320px) { Do one thing here}
#media only screen and (max-width: 480px) { Do another thing here}
The problem with this is that css in max-width: 480px is also affected if screen width is less than 320.
When I look at examples, I see they are using something like:
#media only screen and (min-width: 290px) {}
#media only screen and (min-width: 544px) {}
#media only screen and (min-width: 960px) {}
This basically says that is screen is larger than 290px, do this and if screen is larger than 544px, do that. But I will get the same problem here. Code in min-width: 290px will also be used in any screen size larger than 290px.
So the only solution I can think of that will only work for a specific screen range, is using this:
#media only screen and (max-width: 320px) {}
#media only screen and (min-width: 321px),
only screen and (max-width: 480px){}
#media only screen and (min-width: 640px),
only screen and (max-width: 481px){}
Can anyone advice me on this?
Looking at examples, I see a loot of "redundant" code. Much of the same code is repeated, just having different values:
#media only screen and (max-width : 930px),
only screen and (max-device-width : 930px){
nav li a {
width: 25%;
border-bottom: 1px solid #fff;
font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
}
nav li:last-child a, nav li:nth-child(4) a { border-right: none; }
nav li:nth-child(5) a { border-bottom: none; }
}
#media only screen and (max-width : 580px),
only screen and (max-device-width : 580px){
nav li a {
width: 50%;
font: 400 12px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
padding-top: 12px;
padding-bottom: 12px;
}
nav li:nth-child(even) a { border-right: none; }
nav li:nth-child(5) a { border-bottom: 1px solid #fff; }
}
For large sites, I can just imagine that this will create a lot of code and large CSS files.
Is this becoming the new standard as we have to work with responsive design?
Would it be an option to do following?:
#media only screen and (min-width: 640px) { #import url("css/640.css");}
For a start you're writing/referencing slightly more code than is necessary.
For example:
#media only screen and (min-width: 321px),
only screen and (max-width: 480px) {
can also be written as:
#media only screen and (min-width: 321px) and (max-width: 480px) {
You should never be repeating CSS inside a media query, anything that is set for any screen size, for example background colour or font-family should be set outside of any media query. This means it is only wrote once and applies to them all. Inside each media query should only be code that only affects that specific size. (e.g. widths, font-sizes, etc)
I wouldn't recommend importing css files and the like, just put it all into one, with global styles at the top, and then screen size specific styles inside media queries underneath that. Don't be put off by large css files, it is easier/quicker to download one 10kb file, than ten 1kb files.
I made an example .css file to show you here. Note this would create a horrible site, it is just intended to show you how you could layout code and what goes where.
The example above assumes browser support of media queries. Without it the site would fall on its arse. If you aren't 100% sure of media query support (and aren't using Respond.JS) I would recommend putting the desktop site in the global styles, then overwriting as unnecessary to ensure a fallback for non-supporting browsers
What you wrote is pretty much a way to do it. but like BoltClock says, you have many ways to make a responsive website.
Altho, to avoid 'double' css, you can also make a main css file. Those things that don't need to change in the whole website - no matter what screensize - goes into this file. (for example your font). Besides that your css files will indeed be 'huge' depending on how far you want to go with responsive.
For answering your question if this will be the new standard...it still depends on the owner of the website, if he wants to support mobile friendly websites or not.
I hoped this helped a bit :) good luck!