bootstrap.css contains:
#media (min-width:992px)
I would like to change the 992px to 650px. How do I do it by overriding it from another file and prevent the 992px line in the original bootstrap.cs file from taking effect?
In other words, I want all width of >650px to adopt my style, and I would like to do it without modifying the original bootstrap.cs file.
I don't see a way that you can do that.
I would suggest generating your own bootstrap CSS file. You can easily modify the media query breakpoints by going here:
http://getbootstrap.com/customize/#media-queries-breakpoints
Change the values to your prefered dimensions.
Scroll down to the bottom of the page and click "compile and download".
Ideally if you include your CSS file after the default bootstrap.css file, the styles that are rendered will be from your file. You will have to note that all the styles in the bootstrap.css that you do not want to reflect will have to be overwritten in your custom CSS file.
This is a only option there is if you do not want to modify the bootstrap.css file.
Hope this helps.
Create your own CSS file and put the styles there. #media (min-width: 650px) { .......}
If the styles don't take effect, use !important for the styles.
Related
My website has a Slick-Slider which is not full screen at this moment. I want to do it full screen. So when I inspect the website I can see this code;
#media (min-width: 768px) .col-md-9 {flex: 0 0 75%;max-width: 75%;}
This code comes from Global.css which I dont have it in my theme folders.
When I change max-width to 100% on inspect slider becomes full screen when I paste this code to my css file nothing happens. How can I mport this code to my CSS?
Thanks.
Just include it normally in your CSS. Local CSS takes precedence over global CSS settings. IF you are able to, make sure that your CSS document is included after the global one.
Does anyone know what CSS class controls the width of the content area of the _Layout.cshtml and how to modify it (make it wider)?
I know it says
class="container body-content"
but I can't see how to modify it. I read it's better to modify the Site.css to override the bootstrap.css instead of modifying it directly.
Thanks.
I discovered that the default bootstrap.css is using the #media rule so it is doing different things at different resolutions which is why I was having a hard time tracking what was going on. So in my Site.css I override the behavior with my own settings like:
#media (min-width: 1920px) {
.container {
max-width: 1840px;
height: 800px;
}
and now it is the width I want.
I want to change bootstrap container default width, which is 1170px.
Is it OK to override settings like this?
#media (min-width: 1200px) {
.container {
width: desired_width;
}
}
Is that all I have to actually do?
It is not good to directly edit a compiled (and perhaps minified) CSS file. It's considered a bad practice and should be avoided.
If you want to change the default width you have to recompile your Bootstrap. This depends on how you are currently using Bootstrap; if you are using a CSS preprocessor such as SASS or LESS you can just edit the variables (see variables.less). Otherwise you can go to http://getbootstrap.com/customize/ in order to get a custom build.
If you are not using any preprocessor, you can fiddle with the grid system and the media queries breakpoints.
Answering your question you probably just want to change #container-large-desktop and #screen-lg using a custom build (assuming you are not using a preprocessor).
I've been given the task of customising certain elements of a site which is using Twitter Bootstrap 3.0.2.
The site will be using default Bootstrap styles and responsive layouts except for a particular custom CSS theme file whose modified styles will only be applied when certain users access the site via certain means.
In any event, I need to disable just the .xs responsive layout and nothing else. This means that the screen must retain a small screen layout on resolutions below 767px.
I've looked at many answers on this site and the closest one is this one that describes editing the existing bootstrap.css file.
I don't want to edit the core bootstrap files but simply want to override the .xs layout in a custom CSS file that is called after the bootstrap file.
I'm not sure how or what I should be editing as the media queries look like the following and it's a bit confusing to me.
#media (max-width: 767px) {
.hidden-xs,
tr.hidden-xs,
th.hidden-xs,
td.hidden-xs {
display: none !important;
}
}
#media (max-width: 767px) {
.hidden-sm.hidden-xs,
tr.hidden-sm.hidden-xs,
th.hidden-sm.hidden-xs,
td.hidden-sm.hidden-xs {
display: none !important;
}
}
Any and all answers are greatly appreciated.
Thanks in advance.
I understand that using different CSS compression shouldn't really have any effect on the site outcome (except smaller file size) but my site breaks completely when I set Compass to spit out compressed CSS.
I'm not sure what it is that breaks, but I believe it's Susy that collides with some other Compass function like the sprite or base64 inline image functions.
In order to not paste too much code in this question, here are two links to demonstrate (same source, generated seconds apart)
Using output_style = :expanded in config.rb (everything works):
http://davidpaulsson.se/expanded/
Using output_style = :compressed in config.rb (layout breaks):
http://davidpaulsson.se/compressed/
I'm using Jekyll to generate the static files, and the source files are available on Github: https://github.com/davidpaulsson/davidpaulsson.se/tree/master/sass
The problem is with this piece of code (_general.scss, line 208):
#media screen and (max-width: 769px) {
-webkit-text-size-adjust:none;
}
Here you have a CSS declaration without a selector, which is invalid.
SASS should've produced an error. Maybe it failed to do so because of the #media wrapper which kinda looks like a selector.
I'm not sure what this CSS property does, try applying it to html or *:
#media screen and (max-width: 769px) {
html {
-webkit-text-size-adjust:none;
}
}