Bootstrap Media Queries Inside a Selector in a LESS Import? - css

I'm trying to apply Bootstrap to a specific div. To do this, I'm importing the Boostrap LESS files as follows:
.bootstrap_wrap {
#import 'bootstrap/bootstrap.less';
#import 'bootstrap/responsive.less';
}
However, doing so seems to break media queries.
Is there any way to selectively apply Boostrap without breaking media queries within the Boostrap CSS?

It's not clear to me if you are compiling this or using less.js
I'm able to compile it without errors (using Codekit), and the results look good, just make sure the paths are correct.
If I create a new bootstrap_wrap.less file with
.bootstrap_wrap {
#import 'bootstrap.less';
#import 'responsive.less';
}
and place it in the same directory as the other bootstrap less files, then compile it this is the result:
bootstrap_wrap.css
The results look promising to me, for example I see:
#media (max-width: 767px) {
.bootstrap_wrap #footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
Good luck!

Related

some css queries not working

I'm currently working on this:
https://codepen.io/juanor/pen/gxELZN
I am having trouble getting my queries for fonts working correctly for two specific parts. They work fine for the entire project but for these two: p.maininfo and .ejkanji, .ejkana, .ejes.
This is my query:
#media screen and (max-width: 800px) {
html {
font-size: 20px;
}
I'm using for all the elements rem units, and they seem to work just fine with the query. Can someone tell my why these two are the only ones not working?
Thank you in advance!
It won't work! as It'll be overridden by already written css styles. this concept is called as specificity. Please have a look on this link. you have written styles on elements like.. body, h1-h6, li, p, etc.. so you need to override the same.
E.g,
body{
font-size: 18px;
}
h1{
font-size : 30px;
}
#media screen and (max-width: 400px) {
body {
font-size: 10px;
}
h1{
font-size : 20px;
}
}
You should not use html as the selector to change type. You can use body. I would suggest revising some of your classes and using web developer tools to make sure they are not being over-written by others.
I looked at your code and noticed that your queries can be improved upon. Look for most-used media queries.
Instead of using html as selector use *, something like as follows...
Following code is working...
*{font-size: 60px;}
#media screen and (max-width: 400px) {
* {
font-size: 20px;
}
<h1>Hwllo World</h1>

rails where to include #media css tags?

Right now I have in my layout.html.erb some css rules with #media
<style>
#media (max-width: 900px) {
.green-button{
display: none!important;
}
.chat_button{
margin-top: 20px!important;
}
#myCarousel{
height:800px!important;
}
</style>
I want to get rid of them and put them in css file. In my css folder I created file mobile.css and put this code there. But it doesn't work.
How do I fix this?
In Rails is important to keep your css in order.
You should have one main app/assets/stylesheets/application.css file where you can list all the css files to import in your application.
So, if you have a app/assets/stylesheets/mobile.css file, the content of application.css will be:
/*
*= require mobile
*/
then, in your page, you have to include within <head> tags the following:
<%= stylesheet_link_tag 'application', media: 'all' %>
Please study the following to understand better Rails Assets Pipeline:
http://guides.rubyonrails.org/asset_pipeline.html#asset-organization
A couple of suggestions:
you are mixing camelCase and dashes in your css: avoid that.
you are assigning styles to an id: avoid that.
you are using !important too often: avoid that.
Only use classes to define css and don't use camelCase but only - (dashes). Avoid !important if you can. Look into a css style guide if you have time.
As a further step I would also suggest you to move to scss.
Rename your mobile.css into mobile.scss and refactor it like that:
$breakpoint: 900px;
#media (max-width: $breakpoint) {
.green-button {
display: none !important;
}
.chat_button{
margin-top: 20px !important;
}
#myCarousel {
height:800px !important;
}
Put them into application.css:
#app/assets/stylesheets/application.css
#media (max-width: 900px) {
.green-button { display: none; }
.chat_button { margin-top: 20px; }
#myCarousel { height:800px; }
}
I created file mobile.css
You really don't need a separate "mobile" stylesheet if you're using #media queries.
#media queries change the styling of your HTML based on the viewport size. Whilst mobiles/tablets can change the viewport size, they generally don't require a completely separate CSS structure.
The old need for a "mobile" stylesheet was born from the fact that pre-iPhone mobile Internet was basic at best. Now we have full HTML rendering on phones, you just need to change how big/visible each element is.
Rails - by default - implores you to use application.css in your layout, which should include the #media queries:
#app/views/layouts/application.css
<%= stylesheet_link_tag :application %>

media queries only work at top

#media screen and (max-width: 1336px) {
.rectangle-box {
visibility: visible;
}
#p-cactions {
top: 461px;
left: 410px;
}
}
#media screen and (max-width: 1040px) {
.rectangle-box {
visibility: hidden !important;
}
#p-cactions {
top: 461px !important;
left: 1110px !important;
}
}
I put these on the top of a css files code and they work but when i put them on the bottom of the code in the css file they dont work at all. Why is my css working in reverse? im using chrome. the css file is main.css for monobook skin in mediawiki. I guess its good i got it to work im just curious.
You must not edit main.css or hack other code code directly! The results are not predictable.
Use the gadgets extension and manage your JS/CSS directly on your wiki. There are gadget options to make them top-loaded if needed.
If you want to do more complex things server-side, read the developing with ResourceLoader doc page. It also has advice on media queries and what to top-load.
I have already figured out a way to make this all work in main.css in a very predictable way. thanks but i have already solved the problem. I changed #media screen to #media. i placed this at the bottom of the css file and it works.

How to conditionally load CSS and extend it using SASS/SCSS

tl:dr version: is there a way to #extend a css class and not have the original class appear in my compiled css without changing all my css classes to %placeholder classes?
Short answer based on the below answers: it appears there is no way to do this unless you go through and convert the css to silent/placeholder classes e.g. convert .one{} to %one{} and even then that will cause problems with media queries.
I have a css file (lets call it "style.css") which contains 200+ CSS classes to style various elements like forms and buttons etc. What I want is to include some of those classes in a project and other classes from that file in other random projects/websites. With each new project I also want to give the classes random semantic class names of my choosing.
My preprocessor of choice when working with CSS is SCSS and I really need an answer that uses the power of SCSS.
Here is a quick example of what I'm talking about - loading css into a SCSS file and then extending that css with my own class names:
//style.css
.one {
color: red;
padding-top: 1px;
}
//style2.scss
#import "style.css";
.two {
#extend .one;
}
The problem here is that my SCSS file will compile to CSS and look like this:
//style2.css
.one {
color: red;
padding-top: 1px;
}
.two {
color: red;
padding-top: 1px;
}
But what I want to do is only include the second class, which I gave a special name.
I've tried a few ways of doing this but here's one example that does not work but is along the lines of what I was thinking I should be able to do:
A.) First, I grab the style.css file and chuck copy/paste it into a style.scss file.
B.) Second I wrap all the whole thing in a placeholder/silent class, like so:
//style.scss
%placeholder {
.one {
color: red;
padding-top: 1px;
}
}
C.) Then I import that SCSS file and try and extend a class of my choosing that is within the placeholder, like this:
//style2.scss
#import "style";
.two {
#extend .one;
}
When I try and compile this I get a blank css file (and rightly so for trying to be too tricky). The other thing I know is that you can't extend nested selectors so "#extend %placeholder .one;" is also out of the question.
My question is this: does anyone know of a way to import and then extend a css class so that the compiled result does not include the imported css?
The only other solution I can think of is to just delete the imported css from the top of my file before I let it out into the wild. But this is honestly less than ideal solution.
Thank you in advance to any answers :)
You're using placeholders incorrectly, the placeholder should simply be one, no need to wrap it. Try this:
// style.scss
%one {
color: red;
padding-top: 1px;
}
// style2.scss
#import "style";
.two {
#extend %one;
}
Note that there is an issue with this approach. While the outputted CSS is leaner than using a mixin (#include), you will not be able to use %one inside of any #media queries. Ie. this will not work:
// style2.scss
#import "style";
#media screen and (max-width:1024px) {
.two {
// This won't produce CSS as it's inside the media query
#extend %one;
}
}
The only way I'm aware to get around this is to use a mixin instead of a placeholder which will result in more CSS (if you use one more than once).
// style.scss
#mixin one() {
color: red;
padding-top: 1px;
}
// style2.scss
#import "style";
#media screen and (max-width:1024px) {
.two {
#include one();
}
}
I've detailed the difference in output between mixins and placeholder selectors on my blog if you're not aware.

Getting errors in the CSS linter when using media queries

When I put the code below through the CSS Linter I get six errors. Are these bugs in the linter or the CSS? I can't see anything wrong with the CSS. I can't seem to turn off or ignore the errors either regardless of the settings.
#media ( max-width: 320px ) {
.test {
padding: 20px;
}
}
I only had to remove the spaces for it to pass:
#media (max-width:320px) {
.test {
padding: 20px;
}
}
Your code is valid it's just that css link is being picky about the formatting.
If you change it to the following it's quite happy with it:
#media(max-width:320px){.test{padding:20px;}}
I'd recommend using this site to validate your css:
http://jigsaw.w3.org/css-validator/

Resources