This is probably a VERY simple question, but I am having a hard time! I have an external CSS file that is working fine and is responsive. As to be expected, the positioning of a few elements is a little "off" when viewed in Firefox. I wanted to write a media query for when the page is viewed in Firefox, and adjust the margins, etc. of a specific element. I thought you could use the prefix:
#-moz-document url-prefix()
as a media query, but that didn't do anything.
How do you write a media query for when the page is viewed in Firefox and Safari?
You can use the selector you mentioned, e.g.:
#-moz-document url-prefix() {
h1, p{
color:pink;
}
}
See this live: http://codepen.io/panchroma/pen/gpXdRj
More about Firefox vendor selectors: https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions#font-family
More browser selectors and hacks: http://browserhacks.com
FWIW, have you double-checked that your FireFox layout issues aren't related to browser default settings and that they couldn't be solved by using a different CSS reset? I've had success in the past with normalize.css
Good luck!
This query only affect to mozilla navigator:
#media all and (min--moz-device-pixel-ratio:0) and (max-width: 680px){...}
And this is only for IE:
#media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) and (max-width: 680px){...}
More information here:
https://developer.mozilla.org/es/docs/CSS/Media_queries
Best wishes!!
Related
I've been looking for a solution to these problems. Basically, I had never used bootstrap before (or CSS), and have bought a template online: http://wrapbootstrap.com/preview/WB0NFRM26
I've managed to turn that into this: www.votgaus.com
That's my website. I think I've done a pretty decent job knowing it's my first experience with CSS. So far, I've been able to find solutions online to everything but these two things:
1) My footer, when opened on my iPhone, expands and fills the whole screen but not the whole text is shown. It's kind of weird to explain. If you can actually open it on your iphone you'll see what I mean. The last line gets cut off at the end. And the only way you can actually close the footer and see the logo at the top is if you scroll down (which is fine). But you can't scroll to show the last line. Why?? This is some of the code. I really have no idea what i'm doing. I put the max-height inside footer, but don't understand then why do I have the .collapse-footer for. I'm really confused as to how this footer was made (I pulled it from bootsnipp).
footer {
background:#764554;
position:fixed;
bottom: 0;
left: 0;
right: 0;
max-height: 100vh;
}
footer .panel {
box-shadow: none;
}
.collapse-footer {
padding-bottom:0px
z-index: 1;
max-height: 100vh;
}
.collapse-footer p {
font-size:14px;
line-height:normal;
}
I think this stems from the fact that I don't really understand where to put the max-height attribute, maybe.
2) My videos take forever to load. Not videos in general, but the videos in the header of the sections. Each section has a banner and the background is either a video or a picture. I've made them quite light, up to a megabyte maximum and most only are 500 KB. At the beginning, I started putting my videos (not the ones from the template) on mp4 and each like 10MB. I thought that was the problem. The template actually has each video in three different versions (mp4, webm and ogg). I thought I could choose. So later I made them webm and reduced the size. It still is so slow. So I decided to get rid of the loader at the beginning since it was giving me so many problems, especially on phones. Nothing. I then changed the name of the folder to webm, and changed the html as well to pick it up. In theory, I should put a still frame on jpeg with the same name, so that on phones it just pulls the picture instead of the video. This is messing everything. Sometimes it loads the videos, sometimes pictures (both on phone and computer), sometimes it mixes the images, even from separate folders. And sometimes refreshing it makes it work much better, but it still takes SOO long compared to how fast the template is. Don't understand why. I've tried making a version of the html where it doesn't pull video and just goes for the still (by forcing the src to the .jpeg), but still, it will pull video sometimes, and load really slow.
I don't know which part of the code is relevant to this. My whole css stylesheet is here:
www.votgaus.com/css/main.css
HTML is just www.votgaus.com . Bootstrap is www.votgaus.com/css/bootstrap.min.css . SASS which I don't even know how it works is www.votgaus.com/sass/main.sass
Thank you to anyone who could give me a tip or help me fix this, even if it's just telling me what to look for. Especially with the loading so slow.
Cheers!
Do you have your own streaming server? If none maybe try hosting your video in some cloud hosting server, explains here - https://aws.amazon.com/blogs/aws/using-amazon-cloudfront-for-video-streaming/
I made a huge mistake and I'm looking for some help.
After building a site with CSS, mobile-first responsive, with respond.js as a polyfill, after I tested it in IE compatibility mode during developing I realized at the end that there's a big conflict between respond.js and the javascript used by the CMS and the Internet Explorer 8 blocks everything from rendering.
I decided to drop the polyfill entirely and go the SASS way with it, using a MQ mixin.
Right now the problem is that IE8 is seeing the mobile version of the website
(sorry I can't give you a link to it)
I have included conditionizr for < ie9 and I have used css2sass to get my CSS nested a little.
I found a great MQ mixin by Stuart Robson (here) ** that I have not yet started to add it, the question is, do I have any other option than to go and edit everywhere I used mq in the code?
The mixin I think I have to use looks like this ** (adapted it a little to make a better use of it for my problem):
#mixin mq($point, $IE9: true, $query1: min, $query2: width) {
#if $IE9 == true{
#media screen and (#{$query1}-#{$query2}: $point +px) {
#content;
}
.lt-ie9 & {
#content;
}
}
#else {
#media screen and (#{$query1}-#{$query2}: $point +px) {
#content;
}
}
}
I'm not going to debug the JavaScript code to make the polyfill work. I have tried several other scripts (including css3-mediaqueries) but I dropped the idea of help from javascript and I want to go the SASS way.
Given that there's a chunk of almost 6k lines of SASS code, is there any SASS way to help me with adding the mixin somehow so that I end up getting something like this?
#media screen and (min-width: 320px) {
body {
margin: 0;
}
}
.lt-ie9 body {
margin: 0;
}
I learned my lesson, started using BrowserStack and I will only go with that mixin from now on. There's still the problem at hand that has to be fixed..
Thanks in advance.
Regards
I will edit all the MQs to use the new mixin and I also have to learn more SASS and stop asking silly questions about it! :)
Thanks everyone!
Does anyone know what is wrong with this rule?
#media screen and (-webkit-min-device-pixel-ratio:0) {
#nav-main li.c_course div{margin-left:1px !important;}
#nav-main li.c_course div{margin-left:1px !important;| margin-right:0px !important;;}
#nav-main li.c_course div div{margin-left:0px !important;}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#nav-main li.c_course div{margin-left:1px !important;}
}
I researched it at media syntax possible combinations. It seems to be valid code (judging by the post even though the 7.3 Recognized media types spec doesn't list the syntax the way the OP does).
Is it supposed to be positioned somewhere else in the .css or what?
Thanks
Using the code:
#media screen and (-webkit-min-device-pixel-ratio:0)
Is a way to target just webkit browsers as it matches a webkit browser with a minimum pixel ratio of zero which in affect is every webkit browser. The issue is that the webkit prefix won't validate against W3C standards as it's vendor specific - it should be used as a last resort and if you don't mind the CSS failing validation.
Here's some info www.w3.org/TR/css3-mediaqueries/#device-aspect-ratio.
It appears the rule should be written as
#media screen and (min-device-aspect-ratio:0){ ... }
Thing is, I don't know if "0" is a valid value. The spec uses a ratio and I don't know what the coder meant by using "0". "0" means nothing anyway---so the statement seems meaningless. www.w3.org/TR/css3-mediaqueries
I'm building a new site for myself as freelancer. I'm planning to use the cycle plugin in the header but I'm experiencing a small problem.
I wrote HTML and CSS for de items that need to be cycled. Each div.feature inside div#featured should be cycled. A div.feature exist of an image and a div.info. They are both floated left, so they would appear next to eachother.
After writing the HTML and CSS I wrote the Jquery and when I test the page I see the first div.feature perfectly displayed, but after the first cycle all the floats seem to go wrong.
You can check it here: http://webstudions.be/projects/layout6/
Also chrome and safari seem the make another mistake as firefox, ie9 and opera.
Does anybody has an idea of how I should fix this or how I could get this to work??
In your CSS Try adding the following line to your elements style:
clear: both;
This generally fixes my float problems.
do You have any elegant approach to benefit from CSS3 features, like border radius or gradients?
I am looking for a solution that would avoid browser-specific CSS properties and browser-specific stylesheet files. I find them both hard to maintain and too verbose.
It could be a Javascript library that would take care of cross-browser compatibilit. Thus, I could use only W3C CSS3 properties support (not browser-specific) and get rid of the library when browsers will start tu support CSS3 well.
So far, I have found these resources that seem to fulfill at least some of my expectations:
eCSStender - JS that is told to imitate the CSS3 features on different browsers (even IE6), I haven't tested yet, however (read about eCSStender)
Mordernizr - JS that detects which CSS3 properties the browser supports
... I'll fiil it with your answers
Or maybe you have other approach that lets You take advantage of CSS3 without very verbose code?
You could use LESS, which has a border-radius example on their homepage:
.rounded_corners (#radius: 5px) {
-moz-border-radius: #radius;
-webkit-border-radius: #radius;
border-radius: #radius;
}
#header {
.rounded_corners;
}
However, I really don't find it that messy to use browser prefixes. For a border-radius, the only thing you need is this:
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
That will work in about a dozen browsers (if you include mobile browsers). Using indentation in this fashion also makes it easier not to forget to update one of the properties. When you decide do drop support for Safari 4 or whatever, you can simply search and replace the rules you want to remove from your CSS files.
Compare that to when we needed box model hacks, NS4, IE5/Mac fixes, and all of that crap.
This is not CSS3 specific, but as you are asking for a concise way to handle the styles and do mention modernizr (which works by adding classes like no-borderradius to your <html> element if that feature is not available), I thought it might be helpful for a generally improved way to organize your CSS.
There is LESS that allows the use of variables, mixins or nested rules in CSS (see the link for examples). This however requires you to compile your .less files into valid .css. To avoid this, there is/will be less.js (see also: Less.js Will Obsolete CSS) which enables you to include .less files directly in your page (useful at least during development).
I think LESS does not require you to learn a lot of new syntax rules and might help to organize fallback CSS right next to the "real" style.