I am making some changes to a CSS template which was written by other developers. There is a place where a certain block gets duplicated. The first version is hidden for the wide-screen display and vice-versa.
I am not sure why it was not possible to utilize just one to do both, but apparently it is somewhat of a common practice. Perhaps it is because this hidden section is displayed as a narrow wide column (using Bootstrap 4) on the right-hand side of the screen, whereas in the mobile version it is displayed above the content in the wide column. But I digress ... Perhaps someone could comment on this bit.
The actual question is as follows.
Suppose we have a class
#media (min-width: 768px)
.d-md-none {
display: none!important;
}
What I would like to do is to display it for the print because it is easier to style it rather than the instance of the same block that is meant for the wide screen. So, in the print media styles, I attempt to do something like this
.d-md-none {
display: block important!;
}
However, I do not see it displayed. What is a prudent course of action here?
Add your print styles at the end of your existing CSS within a rule like so:
#media print {
...
}
Also as mentioned by other commenters, you have a typo in your !important declaration (the exclamation goes before the word important).
Related
I have an issue when printing from a twitter bootstrap appplication.
https://hod-nav.herokuapp.com/members/H0252#
When trying to use the print button, or just file > print, the #sidebar-wrapper still takes up real estate on printed pages.
This only occurs om PC Safari, Mac Safari, and Mac Firefox.
I'm using BS 3.3.6.
I've done a ton of things.
• My css is set to media: 'all'
• I've played around with BS print style sheets like so...
#media print {
#sidebar-wrapper {
display: none !important;
visibility: hidden !important;
}
• I've added the mysterious class="hidden-print" to the element in question.
• I'm able to hide things that don't need to be printed with print style sheets like the above.
• I've also added additional selectors from the cascade to target the element very specifically.
As you can see from either clicking the print button, or just a basic CTRL/CMD + P, the problem browsers listed above want to keep the 250px+ white space at the left, vs. allowing the main container div with the map in it to print at full width as in other browsers.
Just wondering if anyone else had come across this issue in these browsers or others.
I'm happy to proved additional information.
Thanks in advance for reading and thinking.
Sincerely,
Dick
It's not the #sidebar-wrapper taking up space in the layout, it's the left padding of the main element, which you need to disable on print:
#media print {
#wrapper {
padding-left: 0;
}
}
This needs to be placed at the end of your styles, to override the #wrapper selector inside #media (min-width: 768px). Alternatively, you could use div#wrapper instead of #wrapper and it will apply regardless of its position in the CSS file.
And, by the way, none of these ids have anything to do with Twitter Bootstrap.
Looks like there is padding in your wrapper element ->
#wrapper { padding-left:250px;}
So I've been working on my website and I noticed on the Google Pixel phones my home screen has some cutoff words. So I decided to try and hide them completely unless the screen size is big enough for them to be seen entirely. Here's my webpage for reference, and here's my rule that should be affecting the website.
http://manypoint.org/
/*
----Fix for Title Screen on Pixel----
*/
#media screen and (min-width: 481px) and (max-width: 615px) {
.nivo-caption {
bottom:25% !important;
}
}
Here's a screenshot of what it's doing on that certain devices screen size too.
Example
So if you go to the page and inspect that box, you can see that the media rule I have posted above already exists in responsive.css. If you edit it and turn bottom: 10% to bottom: 25% you will see my problem is solved. The only issue, it's not being solved. I am adding this CSS to custom.css which is the last style loaded, and I put it at the bottom of custom.css too. It still hasn't worked. It always uses the original style from responsive.css. Also you can see even with the !important tag it does nothing.
Now I know what you're thinking, just edit responsive.css. Easy fix I know, but I don't have access to that file. It also shouldn't have to come to that, I should be able to override styles in my custom.css since it's loaded last right? Please tell me I'm wrong somewhere in here so I can solve this issue!
I just tried something, and it worked. As above in the comments I was suggested to increase specificity. Then it kind of hit me, maybe I should just try using different width parameters.
That did the trick! Instead of trying to directly override the #media rule that's already somewhere else, I just added a slightly different one. I just changed the pixel counts to 480px and 616px and viola!
Not sure if this is regular behavior, but it solves my problem for sure.
The issue: https://output.jsbin.com/donapohuci
This is a two column layout on desktop. Using a CSS media query, I have set it to be one column when the viewport is 800px or less:
div {
float: left;
width: 50%;
}
#media (max-width:800px) {
div {
width: 100%
}
}
The issue is that when you go to print this (at the moment, using Chrome) it decides that a letter sized piece of paper is smaller than 800px so prints using the media query styles.
We're using Bootstrap where it uses media queries like this. One solution is to modify the CSS so that it adds the 'screen' modifier:
#media screen and (max-width:800px)
Alas, this is a giant enterprise project with multiple teams all contributing so we'd really rather not mess with any of the foundational CSS at this time (as that usually causes a domino effect of other issues on other teams...)
Is there a way to workaround this short of writing a separate print style sheet just for this one particular page we need to have printed "as you see on screen"?
I'm thinking along the lines of some way to tell the browser "pretend the paper is wider than it is and use the desktop layout when you print..."
The way I would solve this is by adding the media screen attribute in the link to the regular CSS so it doesn't apply to print, and create a separate custom print stylesheet to be called after, again, using the print media attribute:
<link href="print.css" rel="stylesheet" media="print">
It is possible that the default Bootstrap has an include to a print file, but this should be easy to remove, and ultimately if it's not possible the latter stylesheet will still overwrite those styles.
I use:
#media(max-width:992px){
h3{
color:red;
}
}
but in the browser it seems that the change does not happen at 992px, but when the screensize is at 887px or less. I have tried disabling css files one by one, but the problem doesn't seem to go away.
I can't figure out what the problem is.
EDIT: It must be something in the HTML file, because when I try the same code for another html file, it works properly. Also, I've noticed that boostrap's media queries are also not working properly (for example, if one of the breaking points is say 1200px, the changes happen at around 1120px in the browser). No idea what causes this. I've tried commenting different parts of the HTML, but it's always the same.
As per the given example it seems that you might be not closing } bracket also code should be like
#media screen and (max-width: 980px) {
h3{
color:red;
}
}
You may check http://webdesignerwall.com/tutorials/responsive-design-in-3-steps link for more information Hope it helps!
As Pravin vaichal, His guess must be true, You mised "}" bracket.
and you should write media query min-width to max-width too.
see this one for more detail about media queries for responsive site.
I would like to print a wikipedia page as-is with the header and the sidebar. By default, when you print them, articles are styled specially for the print medium. I am making material for a programming course and I specifically DON'T want that. checking $('[media]') returns several style and link elements but all are set with media="all".
Where is the stripped down styling coming from and how do I make it not apply?
If you inspect the source of an article page, you'll notice there's a class .noprint which is simply:
display: none;
In the external stylesheet itself (bits.wikimedia.org/en.wikipedia.org/load.php? ...), they use an #media print directive:
#media print{ a.stub,a.new{color:#ba0000;text-decoration:none}...
...etc...
If you use Firebug (or similar), you should be able to remove the .noprint and classes and related CSS to get round the styling.