While printing HTML page all works fine,
After adding bootstrap library all styling disappear on printing.
wrapping css file with #media all {} not solving the issue.
any ideas ?
you could try to see if you add your style sheet after the bootstrap one it may overwrite the styles in the bootstrap file.
Use your bootstrap css cdn in this way--
<link ../bootstrap.min.css' rel='stylesheet' media='all'>
or
<link ../bootstrap.min.css' rel='stylesheet' media='screen,print'>
Related
As the title says, I have two stylesheets, one for mobile, the other for desktop.
I am combining both by using the #media screen and (max-width: 1007) {} query.
This however doesn't seem to function properly for me, as some elements don't get affected by the stylesheet - the desktop stylesheet is overriding some of the elements but not all, for some reason.
Is it bad practice to combine stylesheets? Should I have separate links to them in the HTML file?
My recommendation:
I would have two separate CSS files in your <head> like so.
<link rel="stylesheet" href="mystyle.css">
<link rel="stylesheet" href="responsive-styles.css">
Otherwise, you can combine them by having only one main.css: This would look like so:
#import url("style.css");
#import url("css/responsive.css");
#import url("css/custom.css");
#import url("css/fonts.css");
#import url("css/jquery-ui.css");
The end goal with this is to have only one .main CSS file which includes all your main styles, responsive styles, fonts, etc.
The result would consist of only this in your <head>
<link href="main.css" rel=stylesheet>
Keep in mind stylesheets are loaded in parallel and the page does not block further parsing waiting for a stylesheet to load. Hence, my recommendation.
I have a custom CSS I use with bootstrap. All along I've had my CSS written first before bootstrap then I realised that you're supposed to have Bootstrap first before CSS. Now I'm having problems with my rendering, for example font sizes and colours, particularly with Bootstrap's class=sidenav which I have customised in my CSS file.
<link rel="stylesheet" href="/template/style.css">
bootstrap CSS
For the above, my webpage loads as I want it to (so far). My hover codes in my CSS work properly. But when I try to customise other things, they don't work.
bootstrap CSS
<link rel="stylesheet" href="/template/style.css">
For the above, my webpage loads with my styling except the font size is different but the colours for sidenav are the same as the first scenario. (ie. According to my custom CSS file) My hover codes in my CSS works properly.
However if I try a different (the correct) href for example <link rel="stylesheet" href="/website/template/style.css"> the colours for my sidenav disappear but the font size goes according to my CSS. My hover codes in my CSS don't work properly.
What is going on?
I think something like this is your issue.
Given this order:
<link rel="stylesheet" href="styles1.css" />
<link rel="stylesheet" href="styles2.css" />
# style1.css
.my-class .very-specific .class-selector { color: red; }
# style2.css
.my-class .class-selector { color: blue; }
The color will be outputted as red, because the first CSS file was more specific.
Looking at the path of your href=, I think its not able to render in html because its incorrect.
If you are pointing to the same directory where your index.html file is, you should not need to add the / in front of template.
Try using:
<link rel="stylesheet" href="./template/styles.css">
The ./ points to the current directory. Or you can try
<link rel="stylesheet" href="template/styles.css">
I have a bootstrap4 project where the user needs to be able to print the page. I have a print.css file that I have a few obnoxious styles it just to see if the styles are taking effect and they are not.
My styles are
#media print {
body{background-color:green;}
p{color:red;}
}
Could there be something with bootstrap preventing the styles? The print is not even taking on bootstrap styles.
My link looks like this
<link href="css/print.css" rel="stylesheet" media="print">
I have also tried changing the media type to all and that was a fail as well.
This is not about the background color. I have many display:none;'s in there as well that are not being read either. I only used the background color as a test and example.
I may be wrong but give it a shot,
<link rel="stylesheet" type="text/css" href="print.css" media="print">
I believe you're actually missing the Type and with my understanding it's not needed but may be for a print doc.
Let me know how it works or if it does, make sure this is at the top of the list of Links just to clarify that's not the problem too.
Just read a comment on your question and I believe they're right about bootstrap having it's own print stylesheet but I'm sure it can be overwritten. If not don't worry too much about it. I've just finished developing a site and as long as your code is correct and layed out right it should sort itself out, or atleast mine did :'D
You could try adding it to your main stylesheet with an #media and see if that works
#media print {
/*styles here*/
}
I have added the bootstrap.css file to the head of layout;
<link rel="stylesheet" href="~/Content/bootstrap.min.css">
It appears on console of a page;
File is not empty I checked it
But bootstrap buttons look like;
When I add the bootstrap.css to the view page, it looks what it should look like.
How can I work out this problem ?
Thanks in Advance.
I don't want a stylesheet to be loaded on mobile devices, so I used the
<link href="css/animate.css" rel="stylesheet" media="max-width:1000px">
But it doesn't work! It loads the stylesheet anyway on mobile.
Where am I going wrong?
change max-width with min-width
One thing you can try: if you previously loaded the stylesheet on the mobile, try clearing the cache or using a different mobile phone to see what happens.
Other than that i think your code looks right also add type to the tag but i don't think it will change anything: <link href="css/animate.css" rel="stylesheet" media="(max-width:1000px)" type="text/css">
you can also check this question: Loading difference styles depending on screen