We have an element with a page-wrapper id. I have tested that changing the margin on this element does, in fact, remove the margin on the actual page:
#media (min-width: 768px) {
#page-wrapper {
position: inherit;
margin: 0 0 0 220px;
}
}
My goal is to keep the margin for the standard page, but remove it when printing, so I tried this:
#media print
{
#page-wrapper
{
margin: 0px !important;
/*display: none !important;*/
}
}
The display:none comment there is just to show that it does, in fact, hide that element for printing, it was there a part of my testing. However, the margin does not get changed like it should.
I am out of ideas on what I might be doing wrong, so I am hoping someone has an idea. We do NOT have any other #media print styles on the page, but do have other #media min-width styles, but as far as I know #page-wrapper should override them all for print.
Any ideas?
Edit: Setting background-color:red; doesn't seem to work as well, only hiding the element from view with display: none works.
Edit 2: I do set the #media print absolutely last in the stylesheet, not that it should matter since it's the only print style and uses !important, but still worth mentioning as one more thing to check off.
Edit 3: When inspecting the element, the only margin style applied is the style shown in the first code snippet. The #media printstyle does not show up at all when inspecting the element.
When I needed to tackle something similar, I created a PDF of the section of the page first and then I could print it if I wanted or I could email it instead. To adjust the margins for a PDF, you would use the #page selector. So, my embedded CSS would be:
#page{margin:120px 50px 80px 50px;}
It may or may not work as I haven't tried printing directly from the page, but that may offer another route to the same end goal.
Related
I'm trying to make our web page device responsive with #media. However, I get the errors "Expected RBRACE at line 44, col 3." and "Unexpected token '}' at line 48 col 1.", even though the code looks fine to me. Does anyone have a solution to this?
I've tried to fix the code according to the errors, but that just messes up the #media-portion of the code totally. I've also ran the code through code examiners and the errors remain.
.content {
font-family: 'Lora', sans-serif;
font-size: 48px;
#media (min-width: 480px) {
width: 70%;
margin: 0 auto;
}
}
My goal is to put the code above in css and then use
<div class="content">text goes here</div>
to make our texts look better. However, because of the errors in the css, the div class-line does not have any effect.
You cannot nest a #media query inside vanilla css like this.
You should re-write your css to look like this:
/* outside the media query */
.content {
font-family: 'Lora', sans-serif;
font-size: 48px;
}
#media only screen and (min-width: 480px) {
.content{
width: 70%;
margin: 0 auto;
}
}
Only replace rules where necessary. This will reduce the amount of code you have to write. Also, have a look at https://sass-lang.com/, it will make writing css much easier!
As a general rule of thumb, I tend to place all my #media rules at either the bottom of the stylesheet or in another stylesheet. The idea is that you specify the generic rules at the top of the page (like font-size, font-family, width, etc) then only when you need to, specify what should change and at what viewpoint (like the code I have provided).
Let me know if this is unclear for you!
For whatever reason, I can't seem to put the right words in my search engine. It seems like a really easy thing. Let's say I have simple markup as follows:
<div>Hello!</div>
And I apply the following styles:
body {
background: blue;
}
div {
background: green;
width: 100%;
}
Now ideally, I'd like the green to stretch across the entire screen, but for whatever reason theres a buffer between the ends of the window and the div, that are blue. When I go to inspect the div, I note that there is 0 padding/margin and just the content box. When I inspect the HTML element. it's just the content with no padding/margin as well.
I guess my question is, how can I get rid of that blue buffer area between the html and the containing div? The only way I have successfully done it, is negative margins on the div, but that seems hacky. Any thoughts?
Even without any CSS applied, every browser does some default styling of elements. This includes margin on the body element. To overwrite these default styles (which you can inspect via your browser's developer tools, if any - for example via F12 in Chrome), you just set custom CSS rules accordingly. For your specific problem, you should add margin: 0 to the styling of the body tag.
Now, since every browser has different defaults, many developers decide to reset the styling entirely before applying their own. This can make for a more consistent and streamlined CSS developing process. There are several of these reset stylings available, a famous one being Eric Meyer's CSS reset.
Body element has default margin at every direction 8px long, so just rewrite this default.
body {
margin: 0;
background: blue;
}
#Edit:
...also It's great example to practice 'Developer Tools' using. There's nice guide: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/
You should consult the CSS box model when you have questions like this one. You just need to remove the margin from the body.
body {
background: blue;
margin: 0px
}
div {
background: green;
width: 100%;
}
<div>Hello!</div>
So, I'm consuming a service from DRUPAL and it comes with its own style.
I tried applying css with !important tag to override it and it seems not to be working. The style from the service is pretty simple and I just want to override the background-color attribute.
.FixBackground{
background-color: rgb(238,238,238) !important;
}
#media all and (max-width: 1920px){
.Container{
max-width: 40vw;
}
}
#media all and (max-width: 1023px){
.Container{
max-width: 80vw;
}
}
#media all and (max-width: 728px){
.Container{
max-width: 90vw;
}
}
#media all and (max-width: 567px){
.Container{
max-width: 90vw;
}
}
This is the code example I'm using. Everything is working. The background is working, but it is not overriding the style from within some partes of the html code that the service gives to me.
The inline style is not marked
The only way that !important does not overwrite the other rules (including inline styles), is that there is another !important rule that comes after yours.
I would suggest using the web developer tools of Chrome (press F12, other browser's tools are very similar) and inspect the element you're interested in. There you can see what rules really apply (in the Computed tab), what rules are overwritten (is stuck through) etc.
A potential issue is also that you specified the wrong selector, so the rule does not apply, then you won't find your rule there (but you know what's the issue then).
Using the inspector is usually the way how to debug issues like this.
Example
For example font-size:100% is overwritten by font-size:13px in the following example:
In tab Computed you see the computed values:
There can you also see all the overwritten rules for a specific property (after a click on the arrow):
The code you posted is correct, see fiddle:
https://jsfiddle.net/unn3uen4/1/
<div class="container">
<p>
Test Container
</p>
</div>
<div class="container fix-background">
<p>
Test Override
</p>
</div>
In my test, the fix-background class is overriding the background color correctly.
The issue you are having must be somewhere else. Possible another class overriding your background color. Can you provide a demo website with the issue you are talking about?
edit: added a link to jsfiddle, http://jsfiddle.net/h280xb6p/
Im currently practicing responsive design. Whenever the browser window gets below 400px the structure of the content change.
I have this menu that I use the structure of <a>. What I need help with is to change the html code from <a> to <option> whenever someone with a max-width of 400px or lower enter the site.
I know it's possible to change the appearance, like CSS rules with media query, but is it possible to substitute html code with another html code?
Subject: #menu
#media (max-width:400px){
section#box1, section#box2{
float: none;
width:100%;
}
section#menu {
}
}
To answer your question: It's for sure possible to subtitue html code with some other html, this i something you want to do with Javascript/jQuery. You CANT do this with CSS.
To solve your problem you should make 2 elements, one normal menu and one select element. Then show and hide them depending on screen size, take a look at this fiddle http://jsfiddle.net/77khhzpx/
#media (max-width:400px){
section#box1, section#box2{
float: none;
width:100%;
}
#menu {
display:none;
}
#mobile-menu{
display:block;
}
}
I have tried for over 3 weeks now with different implementations trying to get the right section to not display, and have the left section display at full width. Given that my research shows there is no easy or streamlined way to quickly render Print views without reviewing the print preview, I am asking for some help to figure this out.
the print media css that is not working is this:
#gc {
width: 100%;
}
#asideTrack {
/* width: 100%;*/
display: none;
}
.asideTrack {
/* width: 100%;*/
display: none;
}
.slideAside {
/* width: 100%;*/
display: none;
}
#slideAside {
display:none
}
Any suggestions?
In CSS lower rule overwrites the top if they have the same priority (depending on selector)
You write your common css not in #media block, and it is lower then your #media print block, so it overwrites your #media print styles. For example, it is cause why in print preview your left block has width 74% (because this rule is lower then rule of #media print block where you say it is 100%).
I hope it is helpful.
Solutions
In your css file you may place media print block to the end of file.
Add !important directives to some rules in media print block. ie:
p {
color: red !important;
}
Place your special css for screen in media screen block.