I use:
#media(max-width:992px){
h3{
color:red;
}
}
but in the browser it seems that the change does not happen at 992px, but when the screensize is at 887px or less. I have tried disabling css files one by one, but the problem doesn't seem to go away.
I can't figure out what the problem is.
EDIT: It must be something in the HTML file, because when I try the same code for another html file, it works properly. Also, I've noticed that boostrap's media queries are also not working properly (for example, if one of the breaking points is say 1200px, the changes happen at around 1120px in the browser). No idea what causes this. I've tried commenting different parts of the HTML, but it's always the same.
As per the given example it seems that you might be not closing } bracket also code should be like
#media screen and (max-width: 980px) {
h3{
color:red;
}
}
You may check http://webdesignerwall.com/tutorials/responsive-design-in-3-steps link for more information Hope it helps!
As Pravin vaichal, His guess must be true, You mised "}" bracket.
and you should write media query min-width to max-width too.
see this one for more detail about media queries for responsive site.
Related
I am making some changes to a CSS template which was written by other developers. There is a place where a certain block gets duplicated. The first version is hidden for the wide-screen display and vice-versa.
I am not sure why it was not possible to utilize just one to do both, but apparently it is somewhat of a common practice. Perhaps it is because this hidden section is displayed as a narrow wide column (using Bootstrap 4) on the right-hand side of the screen, whereas in the mobile version it is displayed above the content in the wide column. But I digress ... Perhaps someone could comment on this bit.
The actual question is as follows.
Suppose we have a class
#media (min-width: 768px)
.d-md-none {
display: none!important;
}
What I would like to do is to display it for the print because it is easier to style it rather than the instance of the same block that is meant for the wide screen. So, in the print media styles, I attempt to do something like this
.d-md-none {
display: block important!;
}
However, I do not see it displayed. What is a prudent course of action here?
Add your print styles at the end of your existing CSS within a rule like so:
#media print {
...
}
Also as mentioned by other commenters, you have a typo in your !important declaration (the exclamation goes before the word important).
So I've been working on my website and I noticed on the Google Pixel phones my home screen has some cutoff words. So I decided to try and hide them completely unless the screen size is big enough for them to be seen entirely. Here's my webpage for reference, and here's my rule that should be affecting the website.
http://manypoint.org/
/*
----Fix for Title Screen on Pixel----
*/
#media screen and (min-width: 481px) and (max-width: 615px) {
.nivo-caption {
bottom:25% !important;
}
}
Here's a screenshot of what it's doing on that certain devices screen size too.
Example
So if you go to the page and inspect that box, you can see that the media rule I have posted above already exists in responsive.css. If you edit it and turn bottom: 10% to bottom: 25% you will see my problem is solved. The only issue, it's not being solved. I am adding this CSS to custom.css which is the last style loaded, and I put it at the bottom of custom.css too. It still hasn't worked. It always uses the original style from responsive.css. Also you can see even with the !important tag it does nothing.
Now I know what you're thinking, just edit responsive.css. Easy fix I know, but I don't have access to that file. It also shouldn't have to come to that, I should be able to override styles in my custom.css since it's loaded last right? Please tell me I'm wrong somewhere in here so I can solve this issue!
I just tried something, and it worked. As above in the comments I was suggested to increase specificity. Then it kind of hit me, maybe I should just try using different width parameters.
That did the trick! Instead of trying to directly override the #media rule that's already somewhere else, I just added a slightly different one. I just changed the pixel counts to 480px and 616px and viola!
Not sure if this is regular behavior, but it solves my problem for sure.
Got some weird stuff going on. Trying to fix up an old WordPress theme which was never designed for mobile and I found issues once I added media queries. They seem to be what I want overall on mobile devices but once I hit desktop, everything looks messed up as if it's adapting to the mobile media queries and I'm really confused as to why. Am I supposed to add something to the desktop styles to make this work overall? Here's my site in question: http://destinationbeershow.com/
If you have
<body class="mobile">
at your mobile version and you specify the .mobile in all your rules affecting only mobile, then I guess you will be out of the woods.
Actually, i just solved it. I had min-width for those elements when I meant to use max-width. Duh! I think I'm out of the woods.
You might want to clarify with at least one or two examples of the specific problems you're encountering, but just looking at one or two elements, remember some basic CSS rules.
When using media queries, any rules meeting the conditions will be triggered.
Rules overwrite each other top to bottom, which means whatever is listed last will be the property used.
If you're encountering problems when your rules look different, remember that whether CSS rules overwrite each other depends on a rule's specificity. (This is more of a side note, but important to remember. See this article on calculating CSS specificity if this is a problem you're encountering.)
For example:
#media (min-width: 768px) {
#content {
width: 656px;
}
}
#media (min-width: 480px) {
#content {
width: 100%;
}
}
Once the viewport (browser window size) is 480px your element with id="content" will be 100% width. Then, when your viewport is 768px, it will still be 100% width, because the second rule is overwriting the first one since both rules are true.
If you want rules to override the smaller media query rule, then you have to make sure your larger size media query comes after. For example:
#media (min-width: 480px) {
#content {
width: 100%;
}
}
#media (min-width: 768px) {
#content {
width: 656px;
}
}
Hope that makes sense.
I am creating a responsive site sandbox.mercomcorp.com I am currently working on the iphone 4 in landscape. I am trying to get the telephone numbers at the top to come down where the social icons are here is my css. I am not understanding why when I put top into the css its not working can someone help me? Below is my css for that block
#block-66
{
font-weight:bold;
/* background:blue;*/
position:absolute!important;
left:-215px!important;
top:245px!important;
}
As I can see, your rule is the third in the list, and the 'top' position if overridden by two other rules, in two different media-queries.
(I wanted to post a screenshot of the console, but I can't)
In your case, you have to define your rules after the main rules that is applied.
The
media="all"
#media screen and (max-width: 480px) and (min-width: 320px)
#block-66 {...}
rule is somewhere in the code, and taking precedence over your rule. Try to find it and append your rule after this one.
Also, you should avoid using !important, when possible, and make use of a correct ordering instead.
Hope this helps,
Please see screen shot of media query and rule I am altering to move the phone numbers.
Im using the bootstrap examples with Meteor (fluid.html). I've updated my bootstrap to the latest 2.0.4.
However I'm having an odd problem with the padding-top: 60px; conflicting in the wrong way with
#media (max-width: 979px)
body {
padding-top: 0;
}
and well.. webkit seems to do this (only on Meteor for some reason):
It ends up looking like this:
(Theres a gap at the top above the black bar) - Of course this is the fluid layout so the browser needs to be dragged down to small view (for iPhones/Androids/Tablets)
How would I manage to get the browser to take padding-top: 0 as the preference so It doesn't do this? Or why is it doing this (the css files are loaded in the same order - first bootstrap.css and then bootstrap-responsive.css. I can't figure out the difference
(its supposed to be like this: http://twitter.github.com/bootstrap/examples/fluid.html)
After upgrading to 2.0.4 I still had the issue where at certain resolutions content would get hidden when using navbar-fixed-top. This is what happens at certain resolutions:
After tweaking the CSS I came up with the following which fixes it at all resolutions when added to the top of my CSS file:
#media (min-width: 979px) { body { padding-top: 60px; } }
Hopefully this will sort out your issue.
It does not just do this...
It does more than that. You should inspect what padding-top is set to instead, go through the whole panel and see what is setting it, this should tell you where the problem lies. In a really worst case you could use padding-top: 0 !important; although it should be known that !important is bad advice and you should be able to get around not having to add that.
I don't see how Meteor is responsible as they don't add in any major CSS changes as far as I am aware of; but it might be that there is, but you can only tell if you look where padding-top is set.