Bootstrap 4 printing uses medium breakpoint

up vote
0
down vote

favorite

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

edited Nov 9 at 21:40

asked Nov 9 at 20:07

Matthew Weeks

add a comment |

up vote
0
down vote

favorite

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

edited Nov 9 at 21:40

asked Nov 9 at 20:07

Matthew Weeks

add a comment |

up vote
0
down vote

favorite

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

edited Nov 9 at 21:40

asked Nov 9 at 20:07

Matthew Weeks

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

html css printing bootstrap-4

edited Nov 9 at 21:40

asked Nov 9 at 20:07

Matthew Weeks

edited Nov 9 at 21:40

asked Nov 9 at 20:07

Matthew Weeks

edited Nov 9 at 21:40

asked Nov 9 at 20:07

Matthew Weeks

asked Nov 9 at 20:07

Matthew Weeks

asked Nov 9 at 20:07

Matthew Weeks

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

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

answered Nov 9 at 20:21

Ali

1147

Tried this out but with 992px (as that is the minimum for large breakpoint). I've been testing it out in the print emulator, and the body is doing the minimum width, but styles are still swapping to tablet/mobile and just overflowing outside the window. They are still mobile on the print, but do not overflow
– Matthew Weeks
Nov 9 at 20:27

Did you change .container styles aswell? by the way it would be nice if you add a jsfiddle link of your problem.
– Ali
Nov 9 at 20:37

I did yes. I edited my original post to include a sample jsfiddle
– Matthew Weeks
Nov 9 at 21:41

Note that I had to save the iframe source on its own to test the print preview. Jsfiddle styles seem to interfere with it
– Matthew Weeks
Nov 9 at 21:51

have you tried changing page size? its currently set as a3 with this code: @media print @pagesize:a3
– Ali
Nov 9 at 22:33

|
show 3 more comments

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53232638%2fbootstrap-4-printing-uses-medium-breakpoint%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

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

answered Nov 9 at 20:21

Ali

1147

Tried this out but with 992px (as that is the minimum for large breakpoint). I've been testing it out in the print emulator, and the body is doing the minimum width, but styles are still swapping to tablet/mobile and just overflowing outside the window. They are still mobile on the print, but do not overflow
– Matthew Weeks
Nov 9 at 20:27

Did you change .container styles aswell? by the way it would be nice if you add a jsfiddle link of your problem.
– Ali
Nov 9 at 20:37

I did yes. I edited my original post to include a sample jsfiddle
– Matthew Weeks
Nov 9 at 21:41

Note that I had to save the iframe source on its own to test the print preview. Jsfiddle styles seem to interfere with it
– Matthew Weeks
Nov 9 at 21:51

have you tried changing page size? its currently set as a3 with this code: @media print @pagesize:a3
– Ali
Nov 9 at 22:33

|
show 3 more comments

up vote
0
down vote

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

answered Nov 9 at 20:21

Ali

1147

Tried this out but with 992px (as that is the minimum for large breakpoint). I've been testing it out in the print emulator, and the body is doing the minimum width, but styles are still swapping to tablet/mobile and just overflowing outside the window. They are still mobile on the print, but do not overflow
– Matthew Weeks
Nov 9 at 20:27

Did you change .container styles aswell? by the way it would be nice if you add a jsfiddle link of your problem.
– Ali
Nov 9 at 20:37

I did yes. I edited my original post to include a sample jsfiddle
– Matthew Weeks
Nov 9 at 21:41

Note that I had to save the iframe source on its own to test the print preview. Jsfiddle styles seem to interfere with it
– Matthew Weeks
Nov 9 at 21:51

have you tried changing page size? its currently set as a3 with this code: @media print @pagesize:a3
– Ali
Nov 9 at 22:33

|
show 3 more comments

up vote
0
down vote

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

answered Nov 9 at 20:21

Ali

1147

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

answered Nov 9 at 20:21

Ali

1147

answered Nov 9 at 20:21

Ali

1147

answered Nov 9 at 20:21

Ali

1147

answered Nov 9 at 20:21

Ali

1147

Tried this out but with 992px (as that is the minimum for large breakpoint). I've been testing it out in the print emulator, and the body is doing the minimum width, but styles are still swapping to tablet/mobile and just overflowing outside the window. They are still mobile on the print, but do not overflow
– Matthew Weeks
Nov 9 at 20:27

Did you change .container styles aswell? by the way it would be nice if you add a jsfiddle link of your problem.
– Ali
Nov 9 at 20:37

I did yes. I edited my original post to include a sample jsfiddle
– Matthew Weeks
Nov 9 at 21:41

Note that I had to save the iframe source on its own to test the print preview. Jsfiddle styles seem to interfere with it
– Matthew Weeks
Nov 9 at 21:51

have you tried changing page size? its currently set as a3 with this code: @media print @pagesize:a3
– Ali
Nov 9 at 22:33

|
show 3 more comments

Tried this out but with 992px (as that is the minimum for large breakpoint). I've been testing it out in the print emulator, and the body is doing the minimum width, but styles are still swapping to tablet/mobile and just overflowing outside the window. They are still mobile on the print, but do not overflow
– Matthew Weeks
Nov 9 at 20:27

Did you change .container styles aswell? by the way it would be nice if you add a jsfiddle link of your problem.
– Ali
Nov 9 at 20:37

I did yes. I edited my original post to include a sample jsfiddle
– Matthew Weeks
Nov 9 at 21:41

Note that I had to save the iframe source on its own to test the print preview. Jsfiddle styles seem to interfere with it
– Matthew Weeks
Nov 9 at 21:51

have you tried changing page size? its currently set as a3 with this code: @media print @pagesize:a3
– Ali
Nov 9 at 22:33

Tried this out but with 992px (as that is the minimum for large breakpoint). I've been testing it out in the print emulator, and the body is doing the minimum width, but styles are still swapping to tablet/mobile and just overflowing outside the window. They are still mobile on the print, but do not overflow
– Matthew Weeks
Nov 9 at 20:27

Did you change .container styles aswell? by the way it would be nice if you add a jsfiddle link of your problem.
– Ali
Nov 9 at 20:37

I did yes. I edited my original post to include a sample jsfiddle
– Matthew Weeks
Nov 9 at 21:41

Note that I had to save the iframe source on its own to test the print preview. Jsfiddle styles seem to interfere with it
– Matthew Weeks
Nov 9 at 21:51

have you tried changing page size? its currently set as a3 with this code: @media print @pagesize:a3
– Ali
Nov 9 at 22:33

|
show 3 more comments

draft saved

draft discarded

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Pfthb