I'm redesigning my comics website, http://HittingTreesWithSticks.com, and have been having a lot of trouble with the responsiveness. That being said, I'd like to redo it without responsiveness.
So when I make the screen smaller, elements won't shrink, like http://theoatmeal.com/.
I've only included <link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.css" media="screen"/> in my header, and not the responsive file, yet it's still responsive. Why is that?
Also, do I need to change everything to instead of ?
Thanks!
You can make your site unresponsive by doing the following:
Remove all of the #media rules and styles within them at the bottom of bootstrap.css
Remove max-width: 100%; from the img {} rule
Make sure your HTML doesn't contain any class names with "-fluid"
Related
I'm trying to set the sm breakpoint so that it is >=500 as opposed to the default of 576
I don't use Sass or anything along those lines, so have just been trying to make the change directly into the CSS (I really miss the customiser that Boostrap 3 had)
I of course don't want to tamper with the Boostrap CSS file, but did see the breakpoint values in there. And so I added the following in the <head> section of my HTML
<style>
:root{
--breakpoint-xs:0;
--breakpoint-sm:500px;
--breakpoint-md:768px;
--breakpoint-lg:992px;
--breakpoint-xl:1200px
</style>
But it doesn't appear to be working, as I'm viewing it at 568px and not seeing any changes I've made
I am using Bootstrap 4.x carousel. My page is user scalable with <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, shrink-to-fit=no">.
The page can be scalable/zoomable by mobile touch (two fingers) when any of the two touch points outside the carousel.
How can I make the scalable work when touch points inside the carousel (where keeping default slide behavior)?
Edit
I tried to add the following css:
.carousel.pointer-event {
touch-action: auto;
}
Scalable works now, but touching slides left and right stops working.
How can I make both scalable and slides work at the same time?
I found the solution. Simply add the following css to override the default setup:
.carousel.pointer-event {
touch-action: pan-y pinch-zoom;
}
I'm using twbs bootstrap 3.3.6 with Meteor and trying to style a <fieldset>.
However when I use the Chrome inspector it says that the style is coming from bootstrap.css even though I have tried using class-specific and id-specific css.
My style sheet is in the application root, as suggested by some answers.
I'm very new to meteor and css so I could be making a novice error.
Otherwise, what's the best practice to override bootstrap css settings?
Generally if you want to override the css you should put your css file after all of the other files like the bootstrap css because css starts from top to bottom so the bottom lines are the ones that will be executed, example:
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/your-css.css" />
Also you can add !important at the end of every css line to give that style the top priority no matter of the line index, example:
.someclass {
color: red!important;
}
You can either override the specific property on the same class in your css...
.btn {
background-color: #fff !important;
}
...create an inheritance map so that it only applies to the element inside another specific element...
div.classForSpecificContainer btn {
background-color: #fff !important;
}
or specify your own class and add it to the element in question
myOverrideClass {
background-color: #fff !important;
}
The.. important part is that you use !important; to prevent Bootstrap from overriding it. That will generally solve the problem even if the CSS files load in the incorrect order, but not always. I have made a habit of prefixing my CSS files in the same folder with z- to make sure they get loaded last if I'm using something like Meteor that merges and compresses the CSS.
This seems to be a common problem in Meteor because of the way their build injects the merged stylesheet into the top of the html <header> instead of the bottom. There is a merged PR that looks like it will be available in 1.6.2 that allows you to put a pseudo tag anywhere in the <head> you want the merged css injected.
Example: proposed availability in 1.6.2 - PR already merged
<head>
<link rel='stylesheet' type='text/css' href='some-cdn.bootstrap.css'/>
<meteor-bundled-css/>
</head>
That will work once the merged PR is included in the next build.
Until then...
SOLUTION 1: If you're using the bootstrap LESS or SCSS files, you can just import it into your client/main.less or client/main.scss file and then import your override file after this. It looks like you're using pre=compiled css though, so move to SOLUTION 3.
SOLUTION 2: Use !important on the end of your lines... BAD not recommended practice. If you use important you break the cascade.
SOLUTION 3: Put you third-party library overrides files in your public folder and manually <link> it below the bootstrap <link> in your head. I suggest this for now.
I have included a bootstrap stylesheet in a PHP-File, which I only need for one div. Problem: It should only affect this one div. To achieve that, I placed a link to another CSS before and after the bootstrap-stylesheet as you can see below. But it seems that bootstrap.css still affects some elements outside that div. How can I prevent it from doing it?
<link rel="stylesheet" href="style/style-1.css" type="text/css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<div class="container">
...
</div>
<link rel="stylesheet" href="style-1.css" type="text/css">
There is one feature in CSS called "scoped css" ... it is not well supported (Fireofx only, I believe ... and I think it's better this way)... It allows to say that a stylesheet applies only to a single element.
In your case, but I definitely do not recommend it, you could do something like :
<div class="container">
<style scoped>
//... copy content from bootstrap stylesheet
</style>
</div>
See here for an example : http://css-tricks.com/saving-the-day-with-scoped-css/
or here : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style#A_scoped_stylesheet
Check here to know which browsers support it : http://caniuse.com/#feat=style-scoped
The concept of loading a secondary CSS file after the bootstrap CSS file would be to override certain elements and create your own styles. However, since you only want to take one element from the bootstrap CSS file, you will have to override ALL the other elements if you don't want to see the bootstrap styles on your other elements. This I DON'T recommend.
My suggestion is to examine the styling for the certain element that you want to use from bootstrap and then just recreate it in your own CSS file.
I have some reports in HTML format and want print them in my web application. The problem I have is that I can not force printing operation to apply css properties to coloring header and footer.
<td style="background-color:gray">Total</td>
I expect to see a gray background color row in the printed paper, but everything is white as cells background color.
What do I have to do ?
Have you tried adding the styles via a media query? Either like this in a <style> block:
#media print {
td { background-color: gray; }
}
Or like this in a link in the <head>:
<link rel="stylesheet" type="text/css" media="print" href="your/print/css.ss" />
In case you're not aware of print stylesheets here's a good article on it http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/
This is most likely a setting with whatever software you are using to print this page.
If you are using a web browser, the browser may be removing the colours to save ink etc.
These settings can usually be changed within the browser software itself. I don't think there is anything you can change on your web application to force this background-color.