The medium breakpoint is utilized in Bootstrap 4 for printing purposes

Question

The medium breakpoint is utilized in Bootstrap 4 for printing purposes

Recently, I made updates to some pages to enhance their mobile friendliness. However, we encountered an issue where some users are printing the pages using tablet styles instead of desktop styles, regardless of whether they are in portrait or landscape mode and using Firefox or Chrome.

I am looking for a way to ensure that the pages print with the large breakpoint, but so far I haven't been able to figure it out.

Even though I have already set the following:

@media print {
    body {
        min-width: 992px !important;
    }
}

Desktop sample

Print sample

Here is a sample jsfiddle:

https://jsfiddle.net/jz56frqh/2/show

html css printing bootstrap-4

Answer 1

Answer №1

To adjust the print sizing in Bootstrap, you can modify variables in the variables.scss file:

$print-page-size:                   a3 !default;
$print-body-min-width:              map-get($grid-breakpoints, "lg") !default;

If you prefer to customize it manually in your CSS, you can use the following code snippet (remember to change min-width to your preferred size):

@media print {
  body {
    margin: 0;
    padding: 0 !important;
    min-width: 768px;
  }
  .container {
    width: auto;
    min-width: 750px;
  }
}

For more information on these variables, check out this link: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

Answer 2

To adjust the print sizing in Bootstrap, you can modify variables in the variables.scss file:

$print-page-size:                   a3 !default;
$print-body-min-width:              map-get($grid-breakpoints, "lg") !default;

If you prefer to customize it manually in your CSS, you can use the following code snippet (remember to change min-width to your preferred size):

@media print {
  body {
    margin: 0;
    padding: 0 !important;
    min-width: 768px;
  }
  .container {
    width: auto;
    min-width: 750px;
  }
}

For more information on these variables, check out this link: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

The medium breakpoint is utilized in Bootstrap 4 for printing purposes

Answer №1

Similar questions

Failure to receive results from $.getJSON request

What is the best way to deactivate buttons with AngularJS?

Retrieve information from the database upon clicking the submit button

Tips for including a permanent button at the bottom of a material ui dialog box

Ways to obtain the complete file path through JQUERY for an uploaded file when utilizing <input type="file"> across all browsers and the explanation behind why IE and Chrome return "c:/fakepath/filename"

Mobile displays showing truncated text that is hidden until hovered over

The div in tailwind/css does not expand as expected

Develop fresh JavaScript code using JavaScript

Display Navigation upon clicking a designated button

Interactive mobile navigation featuring clickable elements within dropdown menus

Is there a way to emphasize a particular day on the calendar obtained from the URL?

When viewing HTML "Div" on smaller screens, the full height may not be displayed properly

How can I ensure that changes made to a div in ASP.NET remain persistent during postback?

The alignment of list bullets is inconsistent across different web browsers

Exploring reviews with an innovative combination of Node.js and MongoDB

Enabling or Disabling Inputs in Angular

What is the best method for locating X-Path for elements inside a frameset?

Ensure that the click event is triggered only once for each distinct class

Is there a way for me to make the two form fields expand and fill the gap between them?

Positioning elements vertically and float them to the left side