I'm trying to customize print (margin boxes) on Chrome version 45.0.2454.85 m.
I found lot of questions about this, and accepteded answers as well, but non of those worked for me.
It seem that this:
#media print {
#page { margin: 0px; }
}
works as supposed to be, and hides margin boxes. But what I'd like to do is just customize margin boxes. When I try to do this like in Page-Margin Boxes at www.w3.org
#media print {
#page {
#top-center {
content: "Custom center text";
}
}
}
no effect to boxes at all.
Related
I was wondering if anyone has attempted to create responsive spacers and come across the following issue.
I am trying to customize a specific spacer in my home page such that below a certain screen size (i.e width), the size of that particular spacer will be zero pixels. I am using word press and Elementor pro.
What i have tried to do is select the spacer, right click then edit spacer --> advanced --> custom css ... and i have inserted the following code however nothing seems to happen:
/* Remove spacer block */
#media screen and (max-width:740px) {
.spacer-block {
display: none !important;
}
}
I would really appreciate some help with this.
Many thanks,
MJ
I would recommend you to use margins instead of the spacer. For example:
#media screen and (min-width:741px) {
.my-element {
margin-top: 50px;
}
}
#media screen and (max-width:740px) {
.my-element {
margin-top: 0px;
}
}
I am trying to create a printable document using CSS in my angular project.
For my print document that runs into multiple pages I need automatically to avoid printing the date and title in the header. At the same time I want to make sure that the document is printed with some margins. To achieve this I am using the approach suggested in this answer on SO. However I am not able to get the styling to apply.
My CSS Code looks like this
#media print {
#page {
size: auto;
margin: 0;
}
body {
margin: 2cm !important;
}
}
I have tried pasting this code in both the app.component.scss file as well as the styles.scss file. Both approaches don't seem to work. Any suggestions?
You need to put the following css in your styles.css file
#media print {
#page {
size: auto;
margin: 0mm; // added mm
}
body {
margin: 2cm;
}
}
And if you need component specific styling, you can add that to your component's css file as well:
#media print {
section {
color: orange;
}
}
Here is a Stackblitz example.
You can also try to print this page (https://angular-j4ab2g.stackblitz.io), and you will see that the date from the header is gone, and my custom section has orange text.
EDIT
I think the best option to remove the footer and header is to un-check the box in the print settings
Then you do not need to add the 0mm margin to the #page selector and the 2cm margin on the body selector.
I created an application using Vue.JS and Vuetify. The layout is based on the Google Contacts layout. I am using both a toolbar and a navigation drawer.
I would like to be able to print the content from the browser without printing the toolbar and nav drawer. I created the following CSS class:
#media print {
.no-print {
display: none;
}
}
I applied this class to the toolbar and nav drawer. When I try to print the page, these elements don't show up in the print preview, which is good, but the content does not stretch to the entire page. Looks like the toolbar and nav drawer space is still reserved for these elements.
How can I remove this space reservation?
Space is reserved with padding on v-content, so you'll have to add
.v-content {
padding: 0 !important;
}
to your media query.
Elaborating on Kael's answer, I added this to my my main App.vue compononent:
<style scoped>
#media print{
.v-content {
padding: 0 !important;
}
}
</style>
The following did the trick for me on the layout page.
#media print {
.v-main {
padding: 0 !important;
}
}
I installed a plug-in called Display-listings-shortcode, and added the columns-extension to allow for columns the blogs halfway down the homepage at RitaNaomi.com will be horizontally displayed on a web browser. It looked whacky at first with titles being scrunched beside and underneath the image, but eventually i figured out how to edit the .display-posts-listing class to change the display
.display-posts-listing .listing-item {padding-bottom:30;}
.listing-item
{
float:left;
width:22%;
margin: 40px
}
But when I look at it on a mobile device, they're all scrunched together as if it was still being displayed on a laptop. I want to have it listed vertically and not horizontally, because thats the way it would fit best.
I tried (and it didn't work) to use #media to change it through the css, but it didn't work.
#media handheld {
.display-posts-listing .listing-item {
clear: both;
display: block;
}
.display-posts-listing img {
float: left;
margin: 0 10px 10px 0;
}
}
You shouldn't be using #media handheld {} since it's been deprecated according to MDN.
You're better off targeting pixel-width values. You may need a couple queries, and some of the oldschool standards were 1023px, 767px. Feel free to replace the 900px below with whatever works for you.
#media only screen and ( max-width: 900px ){
.display-posts-listing .listing-item {
/* CSS Here */
}
}
Removed the custom CSS that was already added from the original theme. It was interfering with the Columns display.
Not using #media handheld {} because it was deprecated (thanks to xhynk for the response), and instead used the command (max-width: 768) , the point at which the title and image css look funky.
To make the title display on its own line on a bigger screen, i added this to my CSS:
.display-posts-listing .listing-item .title { display: block; }
And now i'm using the above media query to figure out how to style it on smaller devices.
Complete CSS: https://gist.github.com/billerickson/17149d6e77b139c868640a0ed3c73b3a
Is it me or is Twitter bootstrap just not responsive at all using LESS?
One a test site I've set the following:
// Articles
.article {
.makeRow();
}
.article-content {
.makeColumn(7);
}
On resizing the page I'm getting horizontal scroll bars.
A quick check of the CSS shows the width of my article-content column to be 540px; not matter what my screen size.
The makeColumn mixin outputs the static grid. Try this instead:
.article-content {
#grid > .fluid .span(7)
}