Bootstrap 4 printing uses medium breakpoint - html

I recently updated some pages to be more mobile friendly, but the problem is some of our users print off pages and they print using the medium breakpoint (tablet styles) rather than desktop styles. It does this in both portrait and landscape, and it happens in both firefox and chrome
I would like pages to print using the large breakpoint but I can't figure out how.
I even already have the following set:
#media print {
body {
min-width: 992px !important;
}
}
Desktop sample
Print sample
sample jsfiddle:
https://jsfiddle.net/jz56frqh/2/show

There are variables to change print sizing in bootstrap variables.scss:
$print-page-size: a3 !default;
$print-body-min-width: map-get($grid-breakpoints, "lg") !default;
If you want to do it manually in your CSS try this (change min-width to your desired size):
#media print {
body {
margin: 0;
padding: 0 !important;
min-width: 768px;
}
.container {
width: auto;
min-width: 750px;
}
}
scss ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

Related

styles got messes up in printing

I am using an application to print the pages in potrait and landscape mode together.some pages are printing in potrait and some are in landscape.Printing the pages either in potrait or landscape looks good.But printing the pages in potrait and landscape together makes the pages with potrait to be congested.
This is the media query am using,
#media print {
html {
max-width: none;
width:100%;
float:left;
}
#nav-wrapper {
display: none;
}
div.pageBreak {
page-break-after: always !important;
}
#page{
size: auto;
margin: 0;
}
.landscape1 {
transform-origin: top left;
transform: translateY(1850px) rotate(-90deg);
overflow-x: hidden;
width: 1850px !important;
}
}
Media Queries offer matching against the device's orientation:
#media print and (orientation: landscape) {
/* landscape styles */
}
#media print and (orientation: portrait) {
/* portrait styles */
}
Work it in this way.
OR
Maybe you can try this custom css which someone tried online.
Here is a right CSS which work in the most browsers (Chrome, Firefox, IE9+).
First set body margin to 0, because otherwise page margins will be larger than those you set in the print dialog. Also set background color to visualize pages.
body {
margin: 0;
background: #CCCCCC;
}
margin, border and background are required to visualize pages.
padding must be set to the required print margin. In the print dialog you must set the same margins (10mm in this example).
div.portrait, div.landscape {
margin: 10px auto;
padding: 10mm;
border: solid 1px black;
overflow: hidden;
page-break-after: always;
background: white;
}
The size of A4 page is 210mm x 297mm. You need to subtract print margins from the size. And set the size of page's content:
div.portrait {
width: 190mm;
height: 276mm;
}
div.landscape {
width: 276mm;
height: 190mm;
}
I use 276mm instead of 277mm, because different browsers scale pages a little bit differently. So some of them will print 277mm-height content on two pages. The second page will be empty. It's more safe to use 276mm.
We don't need any margin, border, padding, background on the printed page, so remove them:
#media print {
body {
background: none;
-ms-zoom: 1.665;
}
div.portrait, div.landscape {
margin: 0;
padding: 0;
border: none;
background: none;
}
div.landscape {
transform: rotate(270deg) translate(-276mm, 0);
transform-origin: 0 0;
}
}
Note that the origin of transformation is 0 0! Also the content of landscape pages must be moved 276mm down!
Also if you have a mix of portrait and lanscape pages IE will zoom out the pages. We fix it by setting -ms-zoom to 1.665. If you'll set it to 1.6666 or something like this the right border of the page content may be cropped sometimes.
If you need IE8- or other old browsers support you can use -webkit-transform, -moz-transform, filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3). But for modern enough browsers it's not required.
You are good to go!!

How is min-width media query rule s mobile first approach

They always say that min-width #media rule is the way to build for mobile first, I have read plenty articles about it but i still can't understand how exactly min-width rule works> But the max-width is easy and lends itself to easy comprehension.
#media only screen and (min-width: 400px) {....some rule here.....}
#media only screen and(min-width: 900px){......some rule here....}
my question and confusion is: can one used both breakpoint on the same stylesheets? and how does it make for mobile first ?
I need a tolerable responses please, no down voting for those who enjoy down voting please be tolerable and nice enough to help put.
Indeed its true using min-width helps to make a web mobile first.
Let us take an example.
We are creating a web that will scale to two viewports say 300px, 300px+ devices.
1) using min-width
body {
background: yellow;
}
// 300px+ devices
#media (min-width: 300px) {
body {
background: red;
}
}
Here background-color is been overridden for 300px+ devices
2) using max-width
body {
background: red;
}
// 300px- devices
#media (max-width: 300px) {
body {
background: yellow;
}
}
Here background-color is been overridden for 300px- devices
Now down the line in your App timeline you need to support 600px+ devices
3) using min-width
body {
background: yellow;
}
// 300px - 600px devices
#media (min-width: 300px) {
body {
background: red;
}
}
// 600px+ devices
#media (min-width: 600px) {
body {
background: green;
}
}
New media query added to support 600+ devices, no changes needed in the existing style sheet.
4) using max-width
body {
background: green;
}
// 600px- devices
#media (max-width: 600px) {
body {
background: red;
}
}
// 300px- devices
#media (max-width: 300px) {
body {
background: yellow;
}
}
Although we needed additional media-query rule to support 600+ devices, but we needed to change the global body background-color to support new breakpoint.
Now compare 1) with 3) and 2) with 4) ,
you will notice to support new breakpoint
for 1 to 3 we didn't need to change existing style rules, just added new rules over it.
but for 2 to 4 existing rules were modified to support new breakpoint
Summary
so min-width ensures future friendly and progressive enhancement (mobile-first)
but max-width leds to short-sighted approach and needs degradation (mobile-last)

Changing font-size on root doesn't affect #media queries [duplicate]

This question already has answers here:
Is is possible to overwrite the browser's default font-size in media queries using EMs?
(2 answers)
Closed 5 years ago.
I'm working in a page that has
html {
font-size: 62.5%;
}
That means 1rem = 10px instead of 1rem = 16px So far, so good.
The problem is that it doesn't affect #media queries.
/*
it should change at 600px and not 960px.
the #media ignores the 62.5%;
*/
#media (min-width: 60rem) {
.el {
background: blue;
}
}
Check this codepen to see the issue.
http://codepen.io/sandrina-p/pen/bqGZjE
I tested on a retina monitor, with Chrome and Firefox. On Safari the issue doesn't happen.
Any solution?
I found the issue.
In #media you need to use em and it will always read the default browser size, ignoring your custom font-size. The same doesn't happen with rem.
So in this case, you need to set 37.5em (600/16), and it will change the at 600px in every browser including safari.
https://zellwk.com/blog/media-query-units/
(...) the only unit that performed consistently across all four browsers is em. There aren’t any differences between em and rem with the exception of bugs found on Safari.
(...) Unfortunately, px media queries remained at 400px in the third experiment, which makes it a no-go if you intend to support users who change their browser’s font-size value.
Hence, my conclusion after these experiments is: Use em media queries.
#media screen and (max-width: 37.5em) {
.el {
background: blue;
}
}
No. It doesn't have to do anything with you html font-size or your .el font-size. Because 1rem is 16px. So you have to calculate it as per 16px.
#media (min-width: 37.5rem) {
.el {
background: blue;
}
}
This would be your 600px media queries breaks.
Try this
<div class="el">
hey there
</div>
// =========== basic template =========== //
$safeArea: 1rem;
body {
font-family: sans-serif;
}
// ======== actual codepen code ========= //
html {
font-size: 62.5%;
}
.el {
background: red;
font-size: 1.6rem;
}
/* it should change at 600 px and not 960px.
the #media ignores the 62.5%;
*/
#media screen and (max-width: 60rem) {
.el {
background: blue;
}
}
see this codepen - http://codepen.io/anon/pen/aJbxOQ

HTML Printing: DOT-MATRIX

I'm printing an HTML receipt via javascript:window.print()
Printing it to an Inkjet Printer makes everything all good. However on DOT-MATRIX Printer, Epson LX-300+II everything is different. It doesn't fit right, the texts are not aligned. I tried saving it to PDF and printing the PDF from Adobe Reader, the orientation seemed to be all good.
I already set the page size and tried resizing the fonts, but still I can't print it correctly. The Receipt's size, by the way, is 8.5 x 5.5in.
I tried formulating the CSS, but failed to get the correct result.
This is the CSS:
#media print {
html, body {
width: 8.5in;
height: 5.5in;
display: block;
font-family: "Calibri";
font-size: auto;
}
#page
{
size: 5.5in 8.5in;
}
}
Also whenever I tried adding #page { size: 8.5in 5.5in.; size: Portrait; } the printed paper is on landscape.
How can I set things right?
EDIT:
I tried
#page {
size: 5.5in 8.5in;
}
but it's printing the page on Landscape...
Solved the Problem!
In my Printer(LX-300-II), I defined a Paper Size which width is 8.5in and 5.5in in height. There is also a change in CSS Code:
#media print {
html, body {
display: block;
font-family: "Calibri";
margin: 0;
}
#page {
size: 21.59cm 13.97cm;
}
.logo {
width: 30%;
}
}
Since I have images in my Receipt, I made some width adjustments to fit it just right.
I hope this can help those people who is encountering this same problem.
You are using the size and height the wrong way around in #media print, try this:
#media print {
html, body {
width: 5.5in; /* was 8.5in */
height: 8.5in; /* was 5.5in */
display: block;
font-family: "Calibri";
/*font-size: auto; NOT A VALID PROPERTY */
}
#page {
size: 5.5in 8.5in /* . Random dot? */;
}
}
This Problem may come based on the Browser setup or Paper size setup. Check your browser font setting and paper size in printing properties.

CSS - Different header images for fluid grid layout website

EDIT : read further then the next 5 lines! My problem is not the logic of doing different css for mobile, tablet and desktop (#media query) - the problem is to change the IMAGE.SRC attribute FROM INSIDE CSS.
I'm trying to make a new fluid website and I'm trying to create 3 different header images:
Mobile header image (low res)
Tablet header image (medium res)
Desktop header image (high res)
(all the images also vary in aspect ratio)
How do I get this to work?
Currently I've tried to simply change the SRC in CSS for each CSS SECTION (mobile, tablet, desktop)
Like this:
#img_header {
src: url(img/header_m.png);
}
We all know that this doesn't work :D also I don't want to use background-image instead.
What is the proper way to do this?
Should I hack into the generated javascript code from Adobe Dreamweaver CS6 and change the .src from there ?
I'm sure there is a css way, so tell me guys. Thanks
UPDATE: I should have said that I already use media queries...
Here is my css:
/* Layout für Mobilgeräte: 480 px oder weniger. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 97.826%;
padding-left: 1.0869%;
padding-right: 1.0869%;
}
#div_header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#img_header {
src: url(img/header_m.png);
}
/* Layout für Tablet-PCs: 481 bis 768 px. Erbt Stile vom: Layout für Mobilgeräte. */
#media only screen and (min-width: 481px) {
.gridContainer {
width: 93.451%;
padding-left: 0.7744%;
padding-right: 0.7744%;
}
#div_header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#img_header {
src: url(img/header_t.png);
}
}
/* Desktoplayout: 769 bis maximal 1232 px. Erbt Stile von: den Layouts für Mobilgeräte und Tablet-PCs. */
#media only screen and (min-width: 769px) {
.gridContainer {
width: 89.1614%;
max-width: 1232px;
padding-left: 0.4192%;
padding-right: 0.4192%;
margin: auto;
}
#div_header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#img_header {
src: url(img/header.png);
}
}
NOW that you have read everything, you should imagine that I can't change the img.src from inside css..., I think the only way to do so is to hack into the unformatted auto generated javascript from adobe DW cs6, isn't it ?
You can use CSS3 media queries for your desired results.....
And I think you should read this article it will help you :-
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
You can do different images by using media queries
Mobile
#media only screen and (min-width : 320px) and (max-width : 480px) {
Your image for mobile
}
Tablet
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px){
Your image for tablet
}
If you are using single image in diff resolution then you need not to do take 3 images. Take the bigger image (for desktop size) and write the below css
<header><img src="img/header_m.png" /></header>
CSS
header img{max-width:100%}
I believe you are aware of media queries http://css-tricks.com/css-media-queries/
To change foreground image
If you want to change foreground images for different devices then try z-index
.header{
background-color:red;
position:relative; height:auto}
img:first-child{
position:absolute; top:0; left:0;
z-index:-1; width:200px
}
img{
position:absolute; top:0; left:0;
z-index:10; width:200px
}
Change the z-index value for respective device width.
Demo here http://jsfiddle.net/5vpG7/70/
......................
Now used to media query css
#media screen and (min-width: 500px) and (max-width: 800px) {
// your css code here
}
more info about this
i've now set another div inside the div_header, and give that child div a background image and a hardcoded width and height ( matches the individual images ), so i've faked a tag that now have ability to define (backgound-) image source via css instead of defining attribute of image source ;)
thanks anyway for your answers