my problem is that i experience white spaces on my mobile version between slider images on the following website: athleteperks.co.uk
I've been told to you use the following code:
}
.swift-slider-outer {
height: auto !important;
}
this code removes the white spaces between my sliders on my homepage, however it removes my header slider on the mobile and desktop versions.
In your CSS you need to remove the following line:
.swift-slider-outer {height: 600px!important;}
it is within your #media (max-width: 768px) media query. This is forcing your slider to be a certain pixel width and is overriding your solution which is .swift-slider-outer { height: auto !important;}
FYI - !important is got great practice. It's always best to try to see what exactly is going wrong first.
I use tlk chat integration, and I kept seeing 2 scrollbars only on Windows Firefox + IE.
tlk allow me to put a custom CSS to their chat.
I did some research and I've tried all of these below trying to prevent it, but none of them CSS seem to work. On top of my HTML file, I've added
//html, body {height:100% !important;}
// html { overflow-y: scroll !important ;}
// * html .clearfix { height: 1% !important; }
// html {overflow-y: hidden !important; }
Fiddle = https://jsfiddle.net/bheng/yrq93jyy/show/
If you view it on a Windows, you will see this like me
How can I debug this?
This has absolutely nothing to do with laravel nor PHP.
The element #tlkio has a CSS rule overflow: auto; which is differently interpreted by different browsers. To override it, you can do something like this:
#tlkio {overflow: hidden !important}
Ideally, you'd change the original rule without overriding it, but I assume you can't do it since it's a third-party integration.
Check it out: https://jsfiddle.net/yrq93jyy/1/
I can't get colored Glyphicons to print in the color I've set. It's printed black.
<i class="glyphicon glyphicon-time text-success"></i>
I had the same problem when printing normal text but I've added !important in the CSS file like so:
.text-success {color:#688c2a !important}
I've also tried to add it to it's parent but with the same result. It looks good on screen. I am using Bootstrap 3.
CSS media is set to all and I've made sure of no cache with use of PHP ?t=time(); after the CSS-file.
Any ideas on how to get it to work on Glyphicons as well?
Stay away from !important unless absolutely necessary. Bootstrap 3 has a media query for print styles, it's inheriting this style for glyphs:
#media print *, :after, :before {
color: #000!important;
text-shadow: none!important;
background: 0 0!important;
-webkit-box-shadow: none!important;
box-shadow: none!important;
}
As you can see they are already enforcing !important. Create your own print media query that's more specific using a class name instead of just the asterisk which means everything.
#media print .text-success {
color:#688c2a !important;
}
If it still doesn't override the style then use !important. Key is to use the print media query for something like this.
I got the same problem. Actually, in the Bootstrap stylesheet you have
#media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
text-shadow: none !important;
}
...
}
The fragment above comes from original Bootstrap CSS file, do not copy-paste this, it will not solve the problem. This makes every symbol (including glyphicons) black when printing. The only solution I found is to remove this section from the bootstrap CSS stylesheet. After doing this, I am able to print the designed page with proper colors to a PDF file using a PDF printer from my browser.
By the way, this allows to recover all background colors and shadows that are overridden too (they are, however, recoverable using your own definitions with #media print and !important according to other posts).
An inconvenient of such a solution is that once you update your Bootstrap version, you will need to perform the same (manual) operation to keep printing fixed.
UPDATE: As it is proposed by Andreas in his answer, it is not necessary to remove the whole section "#media print". It is actually enough to remove the following line from this section, if you only want to make the glyphicons right-colored:
color: #000 !important;
Ok, so I've tried the suggested solutions but I couldn't get it to work.
I finally had to go to Bootstraps own #media print settings and remove
color:#000 !important
So strange that I only could get the color to print on text before removing that line. I don't know if there is a better solution out there but this is how I solved it.
Thanks for everyones input!
If color is right on screen and wrong in prints, you probably need to find css rules for prints.
Try looking for media-query "#media print" in your stylesheets. Probably you will find the wrong color rule somewhere below it.
the code seem to be right and working find on my end. try to clear your cache and cookies of the browser.
and if still the problem arises try to change it with jquery
$('.text-success').css('color', 'red');
Printing style-sheets can have such issues. Which browser are you using to print?
#media print and (color) {
* {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
Try adding this code to your style-sheet. Also, please check your format and printing options in your browser before you print. hope this helps.
Edit:
If you don't mind having css in your html, you can try adding these styles in your html <style> tags.
DO NOT EVER modify Bootstraps less files, it will end up being a maintenance hell.
Most likely your problem is that the icon will be rendered to i:before and not being the content of i element.
So have your own css to be:
.text-success:before {color:#688c2a !important}
Better overwrite the css instead of changing vendor files;
#media print {
*, *:before, *:after {
color: inherit !important;
}
Newbie question. I'm trying to use a background image for my site which is built with Bootstrap.
I've added additional body CSS in a separate css file in my asset pipeline, and added a background-image:
body {
font-size: 16px;
padding-top: 10px;
background-image: url("../assets/back14.gif");
}
This changes the background fine but also applies it to other elements like nav units etc that I want to leave with default colours.
Can I fix this behaviour or apply the background in a better way?
Sorry to say, but I think you are correct: those backgrounds are transparent by default. As you can see from the Customize page, although there are variables for the backgrounds of active and hover links in the Navbar section, there is no variable for the background of plain old regular Navbar links. :/
Otherwise, not that hard of an override:
.nav-stacked > li > a {
background-color:#ffffff;
}
But still seems like something that should be in there as an option.
JSFiddle
Im using the bootstrap examples with Meteor (fluid.html). I've updated my bootstrap to the latest 2.0.4.
However I'm having an odd problem with the padding-top: 60px; conflicting in the wrong way with
#media (max-width: 979px)
body {
padding-top: 0;
}
and well.. webkit seems to do this (only on Meteor for some reason):
It ends up looking like this:
(Theres a gap at the top above the black bar) - Of course this is the fluid layout so the browser needs to be dragged down to small view (for iPhones/Androids/Tablets)
How would I manage to get the browser to take padding-top: 0 as the preference so It doesn't do this? Or why is it doing this (the css files are loaded in the same order - first bootstrap.css and then bootstrap-responsive.css. I can't figure out the difference
(its supposed to be like this: http://twitter.github.com/bootstrap/examples/fluid.html)
After upgrading to 2.0.4 I still had the issue where at certain resolutions content would get hidden when using navbar-fixed-top. This is what happens at certain resolutions:
After tweaking the CSS I came up with the following which fixes it at all resolutions when added to the top of my CSS file:
#media (min-width: 979px) { body { padding-top: 60px; } }
Hopefully this will sort out your issue.
It does not just do this...
It does more than that. You should inspect what padding-top is set to instead, go through the whole panel and see what is setting it, this should tell you where the problem lies. In a really worst case you could use padding-top: 0 !important; although it should be known that !important is bad advice and you should be able to get around not having to add that.
I don't see how Meteor is responsible as they don't add in any major CSS changes as far as I am aware of; but it might be that there is, but you can only tell if you look where padding-top is set.