This is my first attempt at developing a responsive site. It's working fine in all browsers but IE9. I know that IE9 is compatible with media queries. I checked to see if compatibility mode was turned off and I don't see the icon visible so I believe that it is. My media queries are listed below the base styles. I'll just paste in a few media queries below so that I don't exceed any character limits. Let me know if you need to see more. Note: The doc type is for html5.
Media Queries:
#media only screen and (max-width: 479px) {
/* 320 =================================================== */
header .logo a {
background:url(../images/logo-320.png) no-repeat;
width:213px;
height:69px;
float:left;
margin-top:35px;
display:block;
}
}
#media only screen and (max-width: 480px) {
header {min-width:100%;}
.main-link-wrap {
width:100%;
margin:0 auto;
}
.featured-prod {
width:100%;
}
footer {
min-width:100%;
}
}
#media only screen and (min-width: 480px) {
/* 480 =================================================== */
header .logo a {
background:url(../images/logo-480.png) no-repeat;
width:310px;
height:94px;
float:left;
margin-top:5px;
display:block;
}
.featured-prod .product-box {
width:185px;
margin-left:1.8%;
margin-right:1.8%;
text-align:left;
color:#282828;
font-size:12px;
font-size:1.2rem;
line-height:13px;
float:left;
}
footer .address {
font-size:22px;
line-height:32px;
}
}
Tested with a very simple html5 page.
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
</head>
<body>
</body>
</html>
Referenced your stylesheet. Added
body {background: #F00;}
to the first query and
body {background: #00F;}
to the second query.
Background changes from red to blue as expected when resized in IE9, indicating that media query is working. I suggest try adding the same to your page to prove the media queries.
If the background changes as expected then there is something else wrong with your CSS (e.g. is it targeting the correct element; is another style overriding etc.)
If the background doesn't change then there is something unusual going on in your page, or with compatibility, etc.
Is there a reason you're using a max-width: 479px and a max-width: 480px media query?
I assume you're not seeing any of your styling in the max-width: 479px block? This is because those rules are being overridden by your max-width:480px rule.
Here's why, if a browser is 320px wide - that means it is less than the maximum width of 479px but it is also less than 480px (both conditions are satisfied). And because you've got the max-width: 480px block after your max-width:479px it's overriding those rules. My suggestion would be for you to include the rules in your max-width: 480px in your max-width: 479px block or vice-verse.
As an FYI, this problem is not IE9 specific - arranging your CSS rules in that sense will behave the same way across all browsers.
Related
SO i have designed my first site for a desktop and it works fine on desktop.
I am trying to re-design this for mobile/make it responsive.
I am doing this u=by using the style sheet and putting a condition in.
here is the condition:
#media only screen and (max-width: 375px) {
body{
background-color: red;
}
}
However, when i do this i cant get anything to change for a iphone x (or anything else with a width of 375)
my style sheet is still linked fine - i can change the background on the desktop site fine. I cannot change anything only on the mobile site using this code so im guessing it is something to do wiith the media tag.
Thanks for any help!
<meta name="viewport" content="width=device-width, initial-scale=1.0">
you can check if you have put this statement or
#media only screen and (max-width: 899px) {
body{
background-color: red;
}
}
everything looks good, I guess you have css specificity issue,
try to add !important like,
#media only screen and (max-width: 375px) {
body{
background-color: red!important;
}
}
and try to use responsive things in the neath of CSS styles.
Making webpages responsive using max-width
Try this:
body {
background-color: tan;
}
/* On screens that are 992px or less, set the background color to blue. */
#media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* On screens that are 600px or less, set the background color to olive This should work for your iPhone */
#media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
This should look like this:
Also, make sure this exists in your HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Read more about this here
Seems fine to me, but you might want to consider using this instead:
#media (orientation:portrait){
body{
background-color:red;
}
}
Don't forget about css specificity. For testing, the devtools in firefox are pretty good. You can simulate a phone by pressing Ctrl+Shift+M. It's called responsive Design mode and is made precisely for situations like yours where it's not 100% clear what is causing the problem.
I've got a quite strange error and I seriously can't figure out what I did wrong.
Currently I am working on a responsive website project with media queries.
After weeks of working I just realized that my media queries are not working in Safari but everywhere else.
Some examples of my CSS
#media (max-width: 1138px) {
.column-2 {max-width: 32.4%;}
}
#media (max-width: 950px) {
.column-2, .column-1 {
max-width: 17.9%;border-left:1px solid #e5e5e5;
}
}
#media (max-width: 640px) {
.column-2, .column-1 {
max-width:100%;
border-bottom:1px solid #e5e5e5;
height:20%;
width: 91%;
}
footer div.left, footer div.right {
width:100% !important;
}
}
Viewport Added in HTML head section
<meta name="viewport" content="width=device-width, initial-scale=1">
I've also tried with #media screen only and (...) {}. Still not working.
Any ideas what I'm doing wrong?
Your first breakpoint is missing the closing bracket after "max-width: 32.4%".
I'm not sure if this is the fix but it looks like you're missing a closing bracket after "32.4%" and possibly the "screen" part of your media query. You're not defining the range of what the media query handles. Here's a sample of a media query I wrote on a website I did (http://bonjourproject.com/):
#media screen and (max-width: 600px) {
.bottom {
width: 400px;
}
}
be sure to add "screen and" and see if that works for you.
Note: "screen" is not the only option here there are many more to choose from, but "screen" is pretty common. Let me know if this works!
Without seeing the full stack of your css/html there are many possibilities why this is happening but since its working on the other browsers and not iOS go and try adding this just to test and see if Safari picks it up:
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* put webkit CSS here*/
}
If still nothing then you need to check you html head syntax and css tag make sure there is no typo...try using console. This will at least help me/everyone figure what other steps you need. and as I mentioned try adding something basic in fiddle for us.
I got a problem with website.
It's a jquery mobile framework, and the responsive design works well in Chrome and Firefox, but it does not in Safari on the mobile view.
i inspect it and looks like thet the media queries bellow 600px doesnt work.
Could you give me any help?
i wanna try whit some hacks but i dont know how to use it in media queries.
#media screen and (max-width: 320px){
.mi-slider {
text-align: center;
height: auto;
}
.mi-slider ul {
position: relative;
display: inline;
bottom: auto;
pointer-events: auto;
}
*/much more styles*/
}
Sorry for answer my own question, but i could fixed it, was easy, just making a new .css for hacks:
<link rel="stylesheet" href="css/webkit.css" media="screen and (-webkit-min-device-pixel-ratio:0)" type="text/css" />
and there put the media queries
#media screen and (max-width: 1024px){
#text_biblioteca {
margin-left:24.553954%;
}
#image2_biblioteca {
margin-left:24.165918%
}
#box2_biblioteca {
margin-left:7.57416%
}
}
and done!!!
I'm trying to allow my webpage to react accordingly to the media query attributes. I have searched all over the web and found this universal meta code
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
and in my CSS i change accordingly
#media only screen and (max-device-width: 720px) {
#homebutton input[type=image] {
position:absolute;
left:0%;
top:0%;
margin: 0px;
height:700px;
}
I tried it on my opera mobile emulator on both different mobile interface
WXGA Landscape 1280x800
HD Potrait 720x1280
But the homebutton of mine still remain the same size as it originally is like below
#homebutton input[type=image] {
position:absolute;
left:0%;
top:0%;
margin: 0px;
height:70px;
}
If your 700px rule (in the #media block) is above the 70px rule, and the latter applies outside of any #media blocks, then that will override your 700px rule for all media.
In order for your #media block to override the general rule, you need to move it beneath it in your stylesheet.
See my answer to this question for an explanation.
You can try to search for responsive layout as well and what I suggest is to target all the devices with the width element so try use this:
#media (max-width: 720px) {
#homebutton input[type=image] {
height:700px;
}
}
and unless you want to change some attributes on the elements you don't need to specify it in the media query.
The fixed panel on http://mondaybynoon.com/ disappears, when the window has a width<960.
No JS is used for that.
Can someone explain, how it is implemented?
He is use media query for that responsive website.
You can define in HTML like this:
<link rel='stylesheet' media='screen and (max-width: 900px)' href='css/medium.css' />
OR
You can define in CSS like this:
#media screen and (max-width: 900px){
body {
background: #ccc;
}
}
check these articles for more http://css-tricks.com/css-media-queries/ ,
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
They use the #media rule.
Snippet from their CSS:
#media (max-width:950px) {
#sidebar { display:none; }
#content { margin-left:20px; }
...
}
Documentation:
http://www.w3.org/TR/css3-mediaqueries/#width
They use css to do this. They have rules that say when the browsers width is at this certain width implement this css.