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.
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 Have this simple media query to check resolution of browser and accordingly display or hide the image... But it works only on Chrome and does not work on firefox and IE. any idea whats wrong with my code? or any suggestions what can I do?
#media screen and (max-width: 1030px) {
#img{
display:none;
}
}
#media screen and (min-width: 1031px)
{
#img{
display:block;
}
}
Here is my HTML:
<div id="img"><img src="images/bg.png" height="575px" style="position:absolute; margin-left:6px;" style="z-index:100;"/></div>
Without seeing your html I will assume that you are attempting to hide an image with and id of image? If so I would do the following.
Change the id of img to be a class, for example we will use .image-class this will mean the style can be re-used on other images on the page as IDs have to be unique.
So your html should look similar to this:
<img class="image-class" src="http://placekitten.com/500/500" alt="kitten" />
And then for your CSS:
/* Mobile first strategy (no media query required) - images will not display when under 1030px)*/
.image-class {
display: none;
}
/* Images will display above 1030px */
#media screen and (min-width: 1030px) {
.image-class {
display: block;
}
}
See this fiddle
try display:inline-block;
#media screen and (max-width: 1030px) {
#img{
display:none;
}
}
#media screen and (min-width: 1031px)
{
#img{
display:inline-block;
}
So I have the following fiddle: http://jsfiddle.net/9vu64/
I was currently implementing my queries for my dummy site which were working fine until I added the following below. As seen in the fiddle it seems that #header adapts to the media query header width at any resolution. I remove it, it works fine no problem. I can't seem to figure out the culprit. Thanks.
#media (min-width: 325px) {
#contain {
width:285px;
}
#header {
width:285px;
}
CSS
Use: max-width
#media (max-width: 325px) {
#contain {
width:285px;
}
#header {
width:285px;
}
}
Also, I would suggest using Percentage and give a default width.
For example:
#contain{
width: yyyypx;
}
Then do media queries for max-width. One more thing, you are doing device width - I would suggest screen width
I am currently creating a responsive web design using media queries. For mobile devices I want to remove my JS slider and replace it with something else. I have looked at .remove() and a few other things from the JQuery library, however these have to be implemented into the HTML and I cannot think of a work around from the css angle.
Do you need to remove them, or just hide them? If just hiding is okay, then you can combine media queries with display:none:
#mySlider{
display: block;
}
#media (max-width: 640px)
{
#mySlider
{
display: none;
}
}
You can hide an element and show another depending on screen size using media query from css , this is from one of my live projects (I use this to show/hide icon)
#media only screen and (max-width: 767px) and (min-width: 480px)
{
.icon-12{ display:none; } // 12 px
.icon-9{ display:inline-block; } // 9px
}
Not a 100% sure what you mean. But I created a class "no-mobile" that I add to elements that should not be shown on mobile devices. In the media query I then set no-mobile to display: none;.
#media screen and (max-width: 480px) {
.nomobile {
display:none;
}
}
You can also use jquery function addClass() and removeClass() or removeAttr() to fulfill your purpose.
Example:
$(window).resize(function(){
if(window.innerWidth < 500) {
$("#slider").removeAttr("style");
}
});
Or you can also use media query as follow :
#mySlider{
display: block;
}
#media (max-width: 500px)
{
#mySlider
{
display: none;
}
}
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.