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)
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 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%;}
}
I feel embarrassed asking this question, but I've tried all kinds of ideas and googled quite a bit.
HTML:
<div class="image-full"></div>
CSS:
.image-full {width:100px;height:100px;background-color:#000;}
#media (max-width: 767px) {
.image-full {background-color:#f00;}
body {background-color:#f00;}
}
#media (min-width: 768px) and (max-width: 991px) {
.image-full {background-color:#0f0;}
body {background-color:#0f0;}
}
#media (min-width: 992px) and (max-width: 1199px) {
.image-full {background-color:#00f;}
body {background-color:#00f;}
}
#media (min-width: 1200px) {
.image-full {background-color:#ff0;}
body {background-color:#ff0;}
}
I simply want the div to change background color like the body background is.
What am I missing?
Fiddle here: http://jsfiddle.net/bn5bh6xj/
EDIT:
Both solutions below work.
My problem was that I had a hidden character ( Â ) earlier in my CSS code. I sometimes get them when I code on my mac (in both Sublime Text and Coda, on several different macs and OS X versions). I've spent hours trying to find the reason for them, but no luck. They always appear in PHP before opening a bracket block, like this:
if (hello > 1)Â {
}
They are only visible if I change from UTF-8 to ISO 8859-1.
Remove the background-color declaration from the top. It is overriding your background-color declarations in the media queries.
Add a !important after the background color:
#media (max-width: 767px) {
.image-full {
background-color:#f00 !important;
}
body {
background-color:#f00;
}
}
FIDDLE