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.
Related
I realize this question has been asked before but the solution that is usually supplied involves adding this to the target tag:
overflow-x: hidden
which I've done. This fix prevents horizontal scrolling in Firefox but fails when it comes to Chrome and IE8 (not so much an issue at this moment in regard to IE8). Judging by previous questions this may have become an issue since Chrome version 34. So how do I go about fixing this?
Thr problem CSS that is causing the scrolling looks like this:
// Tablet portrait and landscape
#media (min-width: #screen-sm-min) {
& {
margin: 0 -100% !important;
padding: 30px 100% !important;
}
}
the above causes the content to appear evenly in the center as per the requirement. Any advice on this or a possible resource to explain why this happens in Chrome?
Thanks
P.S. I also noticed that this site doesn't have that problem - why would that be? Fundamental difference in structure? Or the CSS I'm looking for?
Thanks for everyone's efforts even though I provided little information. We solved the error though we still don't know why it was happening. We have different .LESS files for different pages but they are all imported into one called ice-styles.less
Here was were I was adding the overflow-x: hidden and for some reason this was being ignored even with an !important suffix appended. My understanding of this was that it should apply to all pages because it was being attached to the html and body tags.
So we moved the same line above into the .LESS page that the problem was occurring and it fixed the problem - but it didn't introduce the problem into other pages - this suggests that the structure of the page was the real culprit.
Thanks again everyone
did you tried styling it by jquery?
$(document).ready(function(){
$('body').css('overflow-x','hidden !important');
})
or even if it didnt worked trying it after few seconds
$(document).ready(function(){
setTimeOut(function(){
$('body').css('overflow-x','hidden !important');
},1000)
})
there is something that is overwriting you overflow:hidden tag...
maybe there is some css that gives your element some width and then you force the overflow which does not happen at times in chrome or IE...
html {
overflow-x: hidden; //or none
}
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.
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'm working on optimizing a responsive site and Safari (both desktop and mobile) seems to be completely ignoring media queries below a certain point. I have code like the following:
#media screen and (max-width: 767px){
/* Safari responds to css here */
}
#media screen and (max-width: 640px){
/* css here is ignored by Safari */
}
Firefox and Chrome both respond appropriately. Does anyone have any ideas about what is going on?
You can see the site here: http://kgillingham.webfactional.com. What should happen (and works on FF and Chrome) is that as the site becomes less than 640px the header font in the slider should become a smaller size.
edit: The site has now been updated to use javascript to add a class when the size is less than 640px. That class always uses the smaller font size. This means that it works as expected now, but I would much rather use CSS media queries than javascript so I would still like to see a solution.
Turns out I was missing a squiggly brace, so I had code like the following:
#media screen and (max-width: 767px){
/* lots of css */
.some_selector { padding: 20px; /*<---- missing squiggly brace*/
/* more css */
}
#media screen and (max-width: 640px){
/* lots more css */
}
Inserting the missing brace caused Safari to begin working. Other browsers didn't choke on the error which is partially why it was so difficult to track down.
Thanks for the help everyone, I feel pretty silly now.
#media rules are the same concept as normal css rules, the latest rule overwrites the first one. but if a rule is different it would not overrule it.
you could make a workaround by typing, this code would just interpreted by webkits
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* put webkit CSS here*/
}
I was also facing a similar issue with media query the queries were working at wrong break points: This thread has something that might help others coming here. To quote
Try zooming to a zoom in/out to 0 ie. normal resolution. Press Command + 0
Just a thought: could you have your font sizes bumped up in Safari? Try pressing Command 0 to make sure it’s reset to the default font size.
No but what you said made me figure it out!!! Thank you both for helping me work through this. The problem is, I was testing the media query not by resizing the window, but by zooming in on the page.
So, my question isn’t what I thought it was. Should I re-post this as a new question? In FF and Chrome, the media query in the above code kicks in when I zoom in on the web page, but in Safari, it doesn’t. Is there anything I can do to make Safari act more like FF and Chrome here?
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.