Mobile Media Queries - html

I have a website that I need to have working on mobile devices currently it displays like the image below.
So far I have had the following ideas:
Copy the 680 lines of CSS again within the same document in between #media only screen tags.
Copy the same code into a mobile.css stylesheet and start again
"2" is my least favourite option but the most likely I am just wanting to know what your options would be?
iPhone View:

Put this in the head of your HTML
<meta name='viewport' content='width=device-width, initial-scale=1 />

It's going to take a little work but is worth it. You have to take the CSS that is too big on mobile and put them in specific media queries based on size. Let's say you want your titles to change from 80px to 40px when the screen size is less than 600px:
#media screen and (max-width: 1000px) {
.mytitle {
font-size: 80px;
}
}
#media screen and (max-width: 600px) {
.mytitle {
font-size: 40px;
}
}

Related

Prevent running of mobile specific media query(landscape) on desktop view(landscape)

First of all I am really sorry for the title of the question as I wasn't able to figure out on how to describe my problem, so this is why I used such title.
Right now I am starter in using media queries and I am using them on my practice project for its responsiveness and I want to apply an orientation lock on that project. Like, the project is compatible on the mobile portrait view but it is not available on the mobile landscape view.
I have applied the following code for the orientation lock, but the problem is that when the browser window is resized and when it matches the screen resolution, the lock applies. I don't want the lock to get applied on the desktop view.
There is a way which is by using device-width but that has been deprecated by mozilla. So, is there any way to resolve this issue with only min-width or something else?
Please let me know if you are unable to understand.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
<style>
#div-2{
display:none;
}
#media screen and(min-width:320px) and (orientation:landscape){
#div-1{
display:none;
}
#div-2{
display:block;
}
}
</style>
</head>
<body>
<div id="div-1"><p>Orientation lock not applied.</p></div>
<div id="div-2"><p>Orientation lock applied.</p></div>
</body>
Ok i understand now replace the code hope this is useful for you:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<style>
#media screen and (min-width: 320px) and (orientation:landscape) {
#div-1 {
display: block;
}
#div-2 {
display: none;
}
}
#media screen and (min-width: 961px) and (orientation:landscape) {
#div-2 {
display: none;
}
#div-1{
display:block;
}
}
</style>
</head>
<body>
<div id="div-1">
<p>Orientation lock not applied.</p>
</div>
<div id="div-2>
<p>Orientation lock applied.</p>
</div>
</body>
</html>
I think there is not any strange thing.
You write this media query:
#media only screen and (min-width:320px) and (orientation:landscape) {
#div-1 {
display: none;
}
#div-2 {
display: block;
}
}
That contains desktop. So in desktop div-1 is hide and div-2 is visible.
If you want this media query works only for mobile you must use max-width
that filters screens that are larger than what you want(Desktop). It means that styles are not for desktop.
This media query works on size of browser and if you want to filter some Devices size independent of browser width you must use this media query:
#media only screen and (max-device-width: 320px)

Media Queries are affecting the desktop version, but not the mobile version

I have a css media query but it seems to be mixed up and I'm not sure why. It's making the desktop version look like what I want the mobile version to be, and the mobile version looks like what I want the desktop to be. Here is the css page in question:
#media (min-width: 500px;) {
body{background-image:url(ollivanderbackground.jpg);color:#FFFF66;}
.navigation{color:#FFFF99; border:dotted medium #FFFF99; width: 35%;}
a:hover{color: #FFFFCC;}
a:visited{color: #FFFF1A;}
}
#media (max-width: 499px;) {
.navigation{width: 100%;}
.bio{display: none;}
}
in the HTML for the page I have this within the head tags:
<'meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0"'>
What exactly am I doing wrong?
Change:
#media (min-width: 500px;) { ... }
#media (max-width: 499px;) { ... }
To:
#media (min-width: 500px) { ... }
#media (max-width: 499px) { ... }
you can try use '#media screen'
#media screen and (min-width:200px) and (max-width:1000px)
Removing the semi-colon should have fixed the issue
#media (min-width: 500px) { ... }
#media (max-width: 499px) { ... }
Since that is not working, try adding screen
#media screen and (min-width: 500px) { ... }
#media screen and (max-width: 499px) { ... }
If that does not resolve your issue, then add a snippet with your question
I figured it out. It turns out My browser history was really clogged and was loading an older version of the site while trying to mix it with the new CSS and things got really mixed up and weird.
Clearing my browser data fixed this problem. Thanks to all for your helpful tries!
If I understand your question correctly, and I am going out on a limb here without seeing the rest of your code, your responsive layouts are being messed up possibly due to a bad or missing declaration of viewport.
Check, replace, or add this in your head. You currently have single quotes around it
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
Read more about it here
Also, build your application with a mobile-first approach
media max = 480 --> do this until
media max = 768 --> if changes required change or continue to
media max = 989 --> if changes required change or continue to
media max = 1200

Media queries not being read in chrome in mobile debugging view

I am experiencing very strange behavior with Chrome. It is not picking up media queries at certain sizes when it is in the mobile debugging view.
For example the following works in mobile view:
#media screen and (max-width: 980px) {
#cliff {
background-color: red; }
}
but this doesn't work
#media screen and (max-width: 979px) {
#cliff {
background-color: red; }
}
You will see the difference is only one pixel. Then if I come out of the mobile debugging view and change the screen size it works. Can anyone advise, or know of any reason that this is happening?
Do you have this in the header?
<meta name="viewport" content="width=device-width, initial-scale=1">
Also, maybe changing the format will help. This works for me:
#media (max-width:980px){
//Styles
}

Cannot get "#media screen and" to work

I am trying to make an adjustment to my H1 tags when the screen is at 480px width or less. Right now it's a very tall headline when viewed on mobile so I decided to add a custom #media to resolve this. Please ignore the actual CSS values as I am using drastic changes to make it obvious if the changes actually do happen.
In my CSS I tried:
#media screen and (max-width: 480px) {
.intro h1 {
font-size: .5em;
line-height: 60px;
font-weight: 100;
}
}
And used this in my head:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
I've tried several variations of the viewport code, and several variations of the #media code. Including:
#media only screen and (min-width: 480px) {
.intro h1 {
font-size: .5em;
line-height: 60px;
font-weight: 100;
}
and
#media only screen and (min-device-width: 480px) {
.intro h1 {
font-size: .5em;
line-height: 60px;
font-weight: 100;
}
Etc. etc. I should mention I am using bootstrap and I am wondering if that could be causing some conflict? I have never tried to implement custom #media code with a CSS framework like bootstrap before so I am not sure of the rules here! When I view on my phone, or drag my browser as narrow as it'll get, nothing changes other than my H1 headline stacking up with the same huge font instead of getting smaller.
Any help would be greatly appreciated!
Your media queries look correct, make sure you have the media queries after your normal CSS, as it will always use the last set CSS style.

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!