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.
Related
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 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.
I'd like to know whether it is possible to do something like this:
#media screen and (max-width: 50%) {}
(Note: the snippet above won't work because max-width expects <Length>)
I already tried max-width: calc(50%) but had no luck.
Is there a way to do this with only CSS in WinJS, or will I have to do it with Javascript on layout change?
Update:
See answer below. This is how you can do it for approx. 50%. But what if I want different values, such as 25%? Is there a solution?
I'm not sure with it's for, but I think portrait view can help you out in most desktop browse scenarios.
#media only screen and (orientation:portrait) {
.. styles
}
I'm making a website which has 3 breakpoint 768px, 1024px and 1900 px. Which size of CSS is good to keep outside media query containers?
Adding example
All specific styling inside media queries and all common styling outside
h1 {color:red}
#media only screen and (min-width: 480px) {
h1 {font-size:18px}
}
#media only screen and (min-width: 768px) {
h1 {font-size:22px}
}
#media only screen and (min-width: 1024px) {
h1 {font-size:28px}
}
or
Most common used desktop first
#media only screen and (min-width: 1024x) {
h1 {font-size:28px; font-color:red}
}
#media only screen and (min-width: 480px) {
h1 {font-size:18px}
}
#media only screen and (min-width: 768px) {
h1 {font-size:22px; }
}
or
Mobile first
#media only screen and (min-width: 480px) {
h1 {font-size:18px; font-color:red}
}
#media only screen and (min-width: 1024x) {
h1 {font-size:28px; }
}
#media only screen and (min-width: 768px) {
h1 {font-size:22px; }
}
I believe you mean to ask what CSS should not be inside of the media query blocks, right?
If that is the case I recommend that any CSS that does not change be placed outside of the media query blocks. Any colors, font styling, etc. Any CSS that changes placement of elements, the padding, floats, inline or block display types, any structure-type CSS is what I would put in the media query blocks.
Update: To respond to the updated question, are you asking which order you should put the media blocks in? If that's the case as far as I know it doesn't really matter what order they go in. But to comment on the number of possible media queries, I would separate that CSS into different style sheets just to make it more maintainable. Your media queries would then be a part of the links to your style sheets in your HTML.
There are so many ways to approach this problem - and the decision may be different depending on the circumstances. For example, is there an existing site that you are reverse engineering to be responsive or are you starting from scratch?
STARTING FROM SCRATCH
If starting from scratch, one method is to create all of the basic styles OUTSIDE of any media query - so that these styles can be seen by any device (especially those devices that do not support media queries).
Basic styles could include just colors, and fonts etc - or it could be everything except layout.
Then, media queries are used to add the different layouts on top of the basic styles.
MIN or MIN AND MAX
The next question is how will you work your different media queries...
Will you allow them to be applied on top of one another - in which case you may start small and build up - using min-width only.
For example:
#media only screen and (min-width: 600px)
OR you may want to set them in a series of brackets - so that styes for one size do not interact with another size.
For example:
#media only screen and (min-width: 600px) and (max-width: 800px)
Again, there is no right or wrong - both have strengths and weaknesses. The first option allows you to use styles that flow through all widths. The second option allows you to fully control styles that appear in a specific width - without having to deal with the cascade.
DEALING WITH IE
There are a range of ways for dealing with older versions of IE including.
allow IE to see basic styles only
place media queries in separate CSS files and link to these files using media queries... then also link to a selection of these files (like wide screen CSS files only) via conditional comments.
Use some sort of JS solution like respond.js or others to force IE to understand the media queries.
HTH
I've read many articles recently that suggest starting with the smallest resolution first and working your way upwards using media queries. To me that also makes a lot of sense. The only problem is old browsers (IE) not understanding media queries. There are solutions to that problem though (if you Google).