WebGuy
Media Query- Mobile First

@ media print

Media Query in CSS tells our browser, how to behave in different media types and screen sizes. Here we will talk about print media. By default our browser takes care of print by if you want to customize it wih your own way they we should use print media query. This is how we can write the media query. In your css file or create seperate .CSS file for writing print query.

@media print { /*All other code write here*/ #header, #footer, #nav { display: none !important; } }

For better understanding of this media query. Lets understand with this page.Here. At this link our task is to print the resume exactly in Printable resume format. We will handle this using @ media print query

@media print {
body
{
width: 100%;
}
table { page-break-after:auto }
tr { page-break-inside:avoid; page-break-after:auto }
td { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
.container {
width: 100%;
border:none;
}
.preheader{
display:none;
}
.w3-btn{
display:none;
}
.topnav{
display:none;
}
.rightnav{
display:none;
}

.info
{
width:100%;
border:none;
}
.w3-card-4{
box-shadow: 0 0 0 0 !important;
}
.w3-card-2{
box-shadow: 0 0 0 0 !important;
}
.duration{
color:#2196F3;
font-size:14px;
}
.organization{
font-weight:600;
color:#2196F3;
font-size:16px;
}
footer{
display:none;
}
}

Step 1 : First and the most important thing is to Hide all those things which you dont want to print. So for this we will use css property display : none;. If you see that page there we dont want to print footer, header , navigation and button on the resume so we make it {display: none}.

Ex: footer{
display:none;
}
.preheader{
display:none;
}
.w3-btn{
display:none;
}
.topnav{
display:none;
}
.rightnav{
display:none;
}

Step 2 : If you are using shadow property in your css. Then remove that shadow property as well otherwise you will see dark black border. ! important is optional. If you used it in your main css file then use it in media print.

.w3-card-2 {
box-shadow: 0 0 0 0 !important;
}

Step 3 : It is better to use body width 100%. It will cover the maximum area of the page.

body{ width:100%; }

Step 4 : Some times we need to change the font size, width of some div and color of some elements then change the css as well .

Ex :
.duration{
color:#2196F3;
font-size:14px;
}
.organization{
font-weight:600;
color:#2196F3;
font-size:16px;
}

Step 5 : Now the important thing if you have long table or table is floating from one page to other page then add below in your css. Otherwise you will see the row is breaking while printing the page.

Ex : table {
page-break-after:auto
}
tr
{
page-break-inside:avoid;
page-break-after:auto }
td {
page-break-inside:avoid;
page-break-after:auto
}
thead
{
display:table-header-group
}
tfoot
{
display:table-footer-group
}

Now your printed resume look very good. But there is one more issue. When you will print the page you will see page url date and title in the page. So how to remove that will see in step 5.

Step 6 : To remove page url date and title in the page. Add this style in your HTML page.

< style type="text/css" media="print" >
@page
{
size: auto;/* auto is the initial value */
margin: 5mm;/* this affects the margin in the printer settings */
}
html
{
background-color: #FFFFFF;
margin: 5px; /* this affects the margin on the html before sending to printer */
}
body
{
/*margin: 10mm 15mm 10mm 15mm; margin you want for the content */
}
</style >

Find me on social media.

Powered by w3.css

Free Web Hosting