I'm working on an HTML page and when I view the page there are no margins because I set margins and padding to 0px; in my CSS. The issue is when I go to print preview it shows with the margins from the browser setup.
Is there a way I can add margins to my page when viewing but that it doesn't add that extra margin space when it prints? I end up with a pretty big margin.
Use css #media and create different styles for when you want something to look/render differently when it's printed
.my__class {
font-size: 20px;
}
#media print {
.my__class {
font-size: 80px; // when you print .my__class will be 80px, but 20px on screen
}
}
This is a simple example of the basic rule:
<style tyle="text/css">
<!--
#media print {
body { font-size: 10pt }
}
#media screen {
body { font-size: 12pt }
}
#media screen, print {
body { line-height: 1.2 }
}
-->
</style>
Related
I have an h1 with line breaks. On mobile devices, there should be no line breaks.
This code works on Chrome and iPhone but not on Firefox. So I am afraid it might not work on all devices/browsers.
(The code snippet seems to ignore the media query).
h1 {
text-align: right;
}
#media screen and (max-width: 839px) {
h1 {
br {
content: "";
&:after {
content: " ";
}
}
}
}
<h1>This is a<br>header<br>with line breaks</h1>
Note the spaces which get inserted by CSS when the header is on 1 line. And also the header should be able to align to right.
How could I make this cross-browser compatible?
I ended up following the advice of Tim Medora (thanks!).
Pseudo elements on br are not crossbrowser, for example FF and iE will not respond.
I adjusted my CMS (I built a PHP viewHelper in TYPO3) which converts linebreaks to spans.
$textBreakParts = explode("\n", $text);
$convertedText = "<span>".implode('</span> <span>', $textBreakParts)."</span>";
In SASS:
h1 span {display: block}
#media screen and (max-width: 839px) {
h1 {
span {
display: inline;
}
}
}
If you leave the header normally spaced and put the <br> after each word you want it to break at, a space will be left to the left side of each line which is okay since you want it to be aligned to the right. Then add display:none on the <br> at the proper screen size.
h1 {
text-align: right;
}
#media screen and (max-width: 839px) {
h1 br{
display:none;
}
}
<h1>This is a<br> header<br> with line breaks</h1>
Im trying to create a responsive design here through media queries - so far it's been going pretty well, although i just hit a wall!
I have a h1 in my header which is pretty long, so when the screen gets small enough, it won't fit in - and ruins the responsive idea.
What i am asking is, is it possible to change the content in my h1 when the gets - lets say 500px wide? (example)
Right now my h1 is "CARSTEN ANDERSEN", and i would like it to change to "CARSTEN" at 500px.
Thanks in advance
<h1>Carsten <span class="hide-when-narrow">Andersen</span></h1>
<style>
#media (max-width: 500px) {
.hide-when-narrow {
display: none;
}
}
</style>
Since this is a question of content, it should be handled in the markup.
You could hide the excess words/letters by using max-width with overflow: hidden (use white-space: nowrap to force one line):
h1 { border:1px solid red; }
#media (max-width: 500px) {
h1 { max-width: 158px; overflow: hidden; white-space: nowrap; }
}
<h1>CARSTEN ANDERSEN</h1>
JSFiddle: https://jsfiddle.net/azizn/cs5ttm7s/
You need to change the content property
h1:before {
content: 'CARSTEN ANDERSEN';
}
#media only screen and (max-width: 500px) {
h1:before {
content: 'CARSTEN';
}
}
<h1>
</h1>
Something like this?
In my application, I have a left sidebar which I want to hide when the user prints the page.
I am using the following media query :
#media print {
#left_sidebar, #backend_navbar, #flash-messages, #header_buttons, .object_social, a:after, .hide_on_print {
display: none !important;
}
#page-wrapper {
background-color: #ffffff !important;
margin: 0 !important;
}
}
i am hiding the sidebar, that works, but canceling the left margin on the wrapper does not work.
It works when I display the inspector and activate the emulation for css print with chrome and opera, it does not work if i press ctrl+P.
Do you have an idea of what I could do ?
I assume that the original css rule you have set is "margin-left: 50px" as an example of 50px. Try the same way in your media query like this "margin-left: 0". I think it worked for in the past. Might not be the best solution but it will probably get you going.
CSS
#page-wrapper {
margin-left: 50px; /* as an example */
}
#media print {
#left_sidebar, #backend_navbar, #flash-messages, #header_buttons, .object_social, a:after, .hide_on_print {
display: none !important;
}
#page-wrapper {
background-color: #ffffff !important;
margin-left: 0; /** try without !important, if doesn't work, then add it back.**/
}
I Hope that helps.
Is it possible to change font size of header(Page title) and footer(Page URL and Pagination) print by browser in print by CSS?
Actually I've a big title in my page. But i want to display it completely by reducing it's size.
Is there any way to reduce font-size of title as we can set other property of page ie.
#page {
margin-top: 2cm;
margin-bottom: 2cm;
margin-left: 3cm;
margin-right: 3cm;
}
you can try this:
#media print {
h1 {
font-size: 12pt;
}
}
Otherwise you can checkout this tutorial for more information on CSS media:
http://www.tutorialrepublic.com/css-tutorial/css-media-types.php
I have several images(not background images) on my webpage, When I see the Print Preview at 100% scale, images looks fine, but My problem is that when I do a print prview with Shrink to fit scale, all the images are coming smaller than the actual size. I have not supplied any width or height attribute on IMG tag so I assume that in print preview it will load as they appear on screen. I have used below css for print media for IMG but it did not work
img {max-width:100%; }
I am expecting the same image dimension in Shrink to fit and 100% scale.
Is this possible? am I missing something in print css? Please advice.
While working on my project, when I needed to get the original size of image in print preview, I had to use !important. Otherwise, it wouldn't overwrite the style defined initially for the image on the page.
I also had to modify the height of image containers:
#media print {
.logo-container,
.img-wrapper,
img {
max-height: none !important;
height: 100% !important;
}
Do you have your images inside 'container' or 'div' etc? you should create print style for them also not just for the img elements.
I would suggest to use the same style on your elements both for screen and print , like so(this is my print.css):
/*How they look like on the print preview*/
#media print {
#poweredbyLogo{
width:213px;
}
#logoframe{
height:80px;
margin-top:6px;
}
.space{
padding-left:20px;
}
.col-md-6.a1{
background-color: #0000f6!important;
}
.col-md-6.a2{
background-color: #d3d3d3!important;
}
}
/*How they look like on the screen*/
#media screen {
#poweredbyLogo{
width:47%;
}
#logoframe{
height:80px;
margin-top:6px;
}
.space{
padding-left:20px;
}
}
Hope helps, good luck.
Also you can try this.
<img class="application-logo res-media" width="65" height="65">
#media screen {
.application-logo{
width: 65px !important;
height: 60px !important;
cursor: pointer;
margin: 25px;
}
}
#media print {
.application-logo, ._imgcont, img {
max-height: none !important;
height: 65px !important;
}
}