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
Related
We are using sass and have a snippet that looks like this:
.button-row {
float: right;
#media screen and (max-width: 800px){
float: none;
.btn, .btn-primary { <-- this line is giving us an error
etc...
SonarQube is flagging that line and states:
Unexpected unknown type selector " "
(and, yes, that's spaces in between the quotes, but it also underlines that entire line of scss as an error)
My question: What does that mean?
I'm researching this and there does seem to be a lot of issues with SASS and SonarQube specifically around custom elements. But that's not even what's happening here. This is just some (from what I can tell) perfectly valid css classes that sonarQube just doesn't like for some reason. I'm stumped.
If it matters were running SQ 7.9, so definitely a few versions behind.
I'm working through some Sonarqube bugs and it is flagging a LOT of standard CSS, SASS, LESS code which it should not.
My guess is that Sonarqube does not process these properly. I'm personally marking code that I know is correct as a false positive.
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/
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!!
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!
I am getting a strange error in my log file, and I can't find where in my site it is coming from: I am using log4net to log the errors, and the site is MVC3
The error is "A potentially dangerous Request.Path value was detected from the client":
Now, I know this normally happens if html chars etc are posted back to the form.
The strange thing is, I have tried all forms on the site, and I can't get it to happen.
I am logging the Request.Path value in the file, and it gives me:
/assets/img/footer_arrows.gif) ,
url(http:/xxmysite.com/assets/img/footer_bg.png) ,
url(http:/xxmysite.com/assets/img/page_bg.gif
Now the above is in my CSS file (within background image, using CSS3 multiple background images). Also, the items in the url(xx part are not fully qualified in my file.
Also, the first line (footer_arrows.gif) is in a URL(xx
Can anyone think of a reason why this error could happen?
EDIT: Looks like it only happening on IE6-IE8? Stil not sure why?
EDIT 2: Thanks to #Ash Burlaczenko spot: It appears that the "http:/" i.e. missing "/" is actually what is being requested:
actual CSS Tag is:
.inner_wrapper {
position: relative;
margin:23px 28px 0;
min-height:574px;
background-color:#EEE8D6;
background-image: /* CSS3 multiple background images */
url(/assets/img/footer_arrows.gif),
url(/assets/img/footer_bg.png),
url(/assets/img/page_bg.gif);
background-repeat: no-repeat, no-repeat, repeat;
background-position: 29px 100%, 0 100%, 0 0;
overflow:hidden;
}