I am trying to figure out why my media queries are working in Firefox and Chrome but not Internet Explorer 11.
Page here: http://skeeterz71.com/auto/dealers.html
The top form, the photos and information should be centering on the page at these: If anybody has time to look, I would appreciate it.
#media (max-width: 775px){
.bold-product-headline{
text-align:center;
}
.product-image-left{
text-align:center;
}
.dealer-headline{
text-align:center;
}
.dealer-location{
text-align:center;
}
.dealer-phone{
text-align:center;
}
.dealer-information{
text-align:center;
}
.search-by-city{
text-align:center;
}
.search-by-city-select{
text-align:center;
}
}
Note: I am using Bootstrap, but do not know of a bs class that will center in tablet and phone view only.
Multiple things i can suggest because of which it won't be working :
add where media query should work, eg screen
#media only screen and (max-width : 775px) {}
check that compatibility mode is off or not...most of the times this is the problem
missing <!DOCTYPE html> from your document page
Sorry guys: Nevermind. Didn't have a closing tag on one of the queries. I went over the css so many times trying to find the issue and didn't see it until about the 10th time. Probably should call it a day.
I noticed in the inspect element in ie it didn't even see the media query at all. That clued me in and should have been my first thing I should of done....
FF and chrome saw the media query and ie didn't. Strange, but ie was right in this case. FF and chrome were giving me to much slack:)
Related
I'm making an adaptive design version of my app. And I have problems with IE (surprisingly, isn't it?=)
I have the following style code:
#media screen and (max-width: 1200px) {
.flex-string{
flex-wrap:wrap;
flex-direction:column-reverse;
}
.flex-string > div{
width:100%;
}
}
This code work well in all browsers, but in IE 11 the app always renders like the page width is less than 1200 px; rerendering take place when I opening the developer console or resizing the window. Does somebody know how to fix this problem?
Make sure that the "Zoom Level" in Internet Explorer is set at 100%.
Can you please let me know how I can apply a specific rule like
.btn{width:25%;}
only on Safari? right now I have a rule .btn{width:23%;} which is working fine in all browsers but not in safari (my app btns looks smaller at safari).
I already saw some Browser Specific Hacks but they were very confusing for me.
Thanks
/* Safari Specific CSS */
#media screen and (-webkit-min-device-pixel-ratio:0) {
::i-block-chrome,.btn{
width:25%;
}
}
So looking at the Browser Specific hacks URL that you posted. I am not sure what was so confusing about it...
html[xmlns*=""]:root .btn{
width:25%;
}
This should work
I want to fix some errors on CSS displayed on Google Chrome and Safari, however Firefox and Opera mobil are showing correct. Few years ago a find that writting some code for example inside ie7.css the Internet Explorer 7 read the lines and the bug can be solved.
Now I have an issue with chrome and androind navigator, So I think if the bug can be solved on Chrome the bug will be fixed on andriod tablets.
for example I have a line:
.logo-social { position:relative; padding: 10px 0; margin-top:-10px; z-index:500; }
On Firefox my social bars appears -10px above the menu and Slider, buy On chrome appears 20px below the menu and slider, So I set z-index:500; to display over slider and not behind.
If I set margin-top:-25px the social bar will be displayed correctly on Chrome buy looks out of place under firefox. :/
If there are something to fix like IE7 or IE8 will be great!
use the media query technique
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* webkit specific rules here */
Body {}
}
this will target the webkit browsers, or you can use javascript
CSS Solution
#media screen and (-webkit-min-device-pixel-ratio:0) {
// your css here for .logo-social
}
Note: But that will include opera also as it also uses webkit now.
Javascript solution
if (navigator.appVersion.indexOf("Chrome/") != -1 || navigator.appVersion.indexOf("Safari/") != -1) {
// modify
}
Make sure you run the command on specific browser to cross check the appVersion returned
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'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?