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?
Related
I am trying to make a website responsive with WORDPRESS, so when checking the website with different devices and using different browsers, every where the same css is used.
So I decided to use the following format to divide my website into 3 different section for normal pc, tablets and smart phones:
#media (min-width:767px){}
#media (max-width:766px) and (min-width:400px) {}
#media only screen and (max-width: 399px) {}
then for different browsers I am doing:
/*edge*/
#supports (-ms-ime-align:auto) and (max-width:400px) {}
/*chrome*/
#media (-webkit-min-device-pixel-ratio:0) and (max-width: 766px) and (min-width: 400px) {}
the problem is I cant make the same for opera and firefox, I mean I made this for firefox:
/*firefox
#supports (-moz-appearance:none) and (max-width: 399px){
#pg-4-0{
height: 1400px!important;
}
#newROW{
margin-top: 20px;
}
}
*/
/*
#supports (-moz-appearance:none) and (max-width: 399px) {
#pg-4-0{
height: 1150px!important;
}
#newROW{
margin-top: 20px;
}
}
*/
but it wasnt working correctly and I had to remove it. Is this correct way of implementing the responsiveness?
is there a better way to do this?
how can I do this for firefox and opera? (I made the website using wordpress: https://www.haagsehof.nl/)
Is this correct way of implementing the responsiveness?
is there a better way to do this?
Can't say if this is the best way to go about it but here's my advice: don't do browser detection. It's a cat-and-mouse game, you'll never see the end of it.
Back in the days when IE was a popular browser (eww), we had to do browser detection to apply custom "hacks" to make sure sites looked & behaved mostly the same on all major browsers - including Internet Explorer itself.
However, nowadays most major browsers follow the same web standards and so most CSS rules / properties behave pretty much the same way in every one of them so browser detection isn't really necessary anymore. What we do now is feature detection: check if the browser supports a given feature (eg. multiple background images), and if it doesn't then provide a suitable fallback.
Also, to make sure every HTML element behaves & looks the same way in most modern browsers (since each browser often has their own set of default CSS rules) independently of what screen resolution is being used you can use CSS resets which -as the name implies- resets the styling of all HTML elements to a consistent baseline. Personally, I prefer using normalize.css as it isn't as aggresive as CSS resets are and also includes a few useful rules.
Finally, here's a nice article from Google on Responsive Web Design that should help get you on the right track: Responsive Web Design Basics.
I am working with Bootstrap 3.3.2 . My Goal with the site im building was to have the nav menu always collapsable, like when it is in mobile view. to accomplish this I went to bootstrap.com/customize and changed the #grid-float-breakpoint: to 99999999px; so large that it would never uncollapse the nav. This works fine for all other browsers except for Safari. In safari my nav header image shows up, but the icon for the drop-down menu is gone.
In safari when inspecting the drop-down icon's css I find:
#media (min-width: 99999999px;){
.navbar-toggle {
display: none;
}
}
It seems as if Safari thinks my viewport is actually greater then 99999999px. Now the simple change would be to adjust my code to display: inline; But when i do this it takes the .navbar-toggle out of the grid system and not pliable for responsive.
Any help towards a solution or if anyone knows of this as a bug issue, would help out alot. I have already researched issues with the #grid-float-breakpoint and did not find much other then this WAS an issue with chrome a while back but has since been patched.
thanks
Presumably you're referring to http://crbug.com/375574 , which apparently still applies to Safari 8. The solution is to use a somewhat less absurdly-high value for #grid-float-breakpoint. Removing a single digit seems to be sufficient:
#media (min-width: 999999999px) {
Also, I went ahead and filed a WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=141533
After messing around with the css for a few hours I found that adjusting the #media (min-width: 9999999999px) .nav-bartoggle to -webkit-display: inline; and adjusting the parent element width and a few other adjustments can result in acceptable code. Im sure cvrebert's method will work much better. But I just wanted to comment that there is pure css work arounds in the case some one needs to know in the future.
Say for example I had this:
#media screen and (min-width: 480px) {
.example {
background-color: red;
}
}
What if I view this page in Internet Explorer 8? Will it still color .example red even though the width is over 480px, or will it just ignore the stuff in the media query? (I can't test it because I don't have IE8 :P)
I've just tried it out in IE7/IE8 browser/document modes (IE10), and it completely ignores all CSS inside Media queries for me as I assumed it would do. .example turns out with a red background only in IE9+.
The only section in the specification I can find which is (probably) relevant to what actually happens here is the Error handling section.
I have a page which uses non-external CSS in the <style> tags, and in those <style> tags is the following media query:
#media screen and (max-width:768px){
/* CSS */
}
All is working fine in Firefox, the CSS for 768px width and under only renders when it should. However, in IE9, the CSS inside this media query is rendered on load no matter what the size is.
After it loads however, if I change the browser size at all, it rerenders as the desktop version, as it should. So basically, IE9 non-external stylesheet seems to be rendering all CSS, whether it's in a media query for which it doesn't match or not, but then rendering the correct CSS if the browser is resized, even by a pixel.
Does anyone know what exactly is going on with this, or if there's a quick fix? The only solutions I've been able to think of would be working around the issue by reordering my CSS, and adding a new media query, which I'd like to avoid for the ease of updating code.
I had a similar problem with an external css file in ie10.
I sort of fixed it by giving the query a minimum of 1px (0px doesn't seem to work).
It doesn't solve all my problems, but it may be enough for yours.
#media screen and (min-width: 1px) and (max-width:768px){
/* CSS */
}
I came across a similar issue that was happening in IE 10. Setting a min for the media query did not help fix this particular issue. I used a bit of js to resize the window to the exact same size and it fixed the issue that IE was having. It feels a little dirty, but it works.
$(document).ready(function() {
var w = window.outerWidth;
var h = window.outerHeight;
window.resizeTo(w, h);
});
I had similar issue while using external css with media query. solved by loading css after html code.
You can target IE9 only with this fix:
/* IE9 */
#media all and (min-width:0\0) and (min-resolution:.001dpcm) {
body {
background: blue;
}
}
I have seen many sites that are responsive both on desktop browsers and mobile phone browsers, I am working on a site and I have the following stylesheet setup: (The Hicks Design website is a good example of what I want to achieve if you need one)
/* Normal styles go here */
#media screen and (min-device-width:321px)
{
/* Styles */
}
#media screen and (min-width:701px)
{
/* Styles */
}
#media screen and (min-width:1025px)
{
/* Styles */
}
#media screen and (min-width:2049px)
{
/* Styles */
}
However my stylesheet above only seems to work on desktop browsers. (tested with Android Firefox and the default Android browser on a Sony Xperia Ray)
The Hicks design site's rules are very similar to mine, however they make use of min and max but either for me doesn't seem to work on both mobile and desktop browsers. (I plan on optimizing my media queries more I am just trying to get the basics to function as I want them to at the moment).
If I use max-device-width instead of max-width it becomes responsive on mobile browsers, but not desktop browsers...
I have tried the following following to get around the issue:
#media screen and (max-width:480px), screen and (max-device-width:480px)
{
/* Styles */
}
also:
#media screen and (max-width:480px), and (max-device-width:480px)
{
/* Styles */
}
However I don't think either of these are correct as the web developer toolbar for Firefox complains about it. I have also tried a few variations on the above rules but still can't get it to work.
From what I understand max-width reads the viewport width (say.. .the width of the browser window) and max-device-width reads the actual width of the screen you are using to view the site. - I'm confused why max-width doesn't seem to read the mobile's browser width.
I think I'm possibly missing something obvious about media queries here... It doesn't seem to make sense that if I want my site responsive on desktop and mobile browsers I must make a copy of all of my media queries and just change the query from 'screen and (max-width)' to 'screen and (max-device-width)' or vice versa. (which I'm ashamed to even type as a workaround here)
How can I combine the (max-width) and (max-device-width) rules or how can I achieve this?
If you'd rather not read all of the above:
I am using #media screen and (max-width:480px) however it seems only #media screen and (max-device-width:480px) works on mobiles. How can I combine both of these rules to achieve a responsive design on mobile and desktop browsers?
There are a lot of medias out there, and if you want to select only by its properties, use the all keyword:
#media all and (max-width:480px)
{
/* Styles */
}
Edit:
Combine rules with or:
#media all and (prop1:val1), all and (prop2:val2)
{
/* Styles */
}
Combine rules with and:
#media all and (prop1:val1) and (prop2:val2)
{
/* Styles */
}
#media screen and (min-width:240px) and (max-width:480px),
screen and (min-device-width:240px) and (max-device-width:480px)
{
/* Styles */
}
Resolved the issue, previous answers helped me so voted up. Thanks.