Previewing a document and observing the compression of the content

I am facing an issue with getting my print preview to display correctly using the @page directive in CSS. Despite setting precise page margins, the content appears squished on the print preview. You can test this using the following example:

When viewing the print preview (I'm testing in chrome), you will notice that the cards are not centered properly. I have set the card dimensions to 2.5in by 3.5in and the page size to 8.5in by 11in, which should result in 1in left and right margins, along with 0.5in top and bottom margins. However, adjusting these margins accordingly still results in a squished appearance:

https://i.sstatic.net/jqWDp.png

Below is my @page CSS:

@media print {
  html, body, .printable, .results-pane, .embed-view {
    width: 8.5in !important;
    height: 11in !important;
  }

  @page {
    size: 8.5in 11in;
    margin-top: 0.25in;
    margin-left: 0.5in;
    margin-right: 0.5in;
    margin-bottom: 0.25in;
  }
}

Even manual adjustment of the margins does not resolve the squishing issue. The problem persists when attempting to set the margins manually, as shown in the following images:

https://i.sstatic.net/2BYLK.png

https://i.sstatic.net/oKdbb.png

I am seeking a solution to prevent the browser from compressing the content or using @print query to correct this behavior. I have tried setting margins on the body itself, but encountered difficulties with maintaining consistent top/bottom margins across multiple printed pages.

cssprintingprint-previewprint-css

Answer №1

By a stroke of luck, the issue actually lies within the initial media query:

html, body, .printable, .results-pane, .embed-view {
  width: 8.5in !important;
  height: 11in !important;
}

Since all of these elements are set to the same dimensions, they end up conflicting with each other. The solution was simply adjusting the width/height of html, and everything fell into place smoothly from there.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to use jQuery to smoothly transition to the next image in the lineup?

I have a requirement to create a slideshow of images, where each image fades out before the next one fades in. It seems like a straightforward task. <ul class="nav fading"> <li><?= anchor("#","Supported by",array("class" => "footer-hea ...

javascriptjqueryhtmlcssimage

When clicking on the HTML div element, it will be appended to the application

Within my vertical menu, there are 5 items including web design and mobile app. When clicked on these items, they reveal their respective href attributes as shown below. <div class="col-md-3"> <ul class="nav nav-tabs nav-stacked"> ...

javascripthtmlcss

Tips for implementing a Dialog Box within a Card Action Button Group

I'm currently exploring the option of incorporating a Dialog box as a button within a Button Group, which is then nested inside a CardActions component in Material UI. Previously, I had success with using regular Buttons instead of a Dialog, where th ...

javascriptcssmaterial-ui

Incorporate Bootstrap into your Bigcommerce stencil theme for seamless design integration

As a newcomer to BigCommerce's Stencil theme, I am looking for guidance on integrating Bootstrap into the theme for local development. Is it feasible to incorporate custom CSS and JS into the Stencil theme as well? ...

csstwitter-bootstrapthemesbigcommerce

Custom theme causing icons to not appear on screen

I've been experimenting with jQuery mobile and designed a custom theme using themeroller. Following the instructions, I added the necessary links in the <head>: <link rel="stylesheet" href="themes/mycustomtheme.min.css" /& ...

jqueryhtmlcssjquery-mobileicons

What tag would allow me to seamlessly customize the text language choice on a website using CSS to my liking?

Here are two HTML snippets for allowing the user to choose a language: One uses <select> and <option>s, The other uses a <div> with alternating <input>/<label>s. I plan to select one of these methods (or find a better one) a ...

htmlcssinputmultiple-choice

The jQuery scrollTop function seems to be malfunctioning following an ajax request

My ajax call is functioning properly, but I am experiencing an issue with the scrollTo plugin from JQuery. It is not positioning the content where I want it to be located below. //This function reveals the email body when a list item is clicked. jQue ...

jquerycssajaxjquery-ui

CSS: Revert INPUT Element Back to Default Width

Although it may seem impossible, I am still going to ask the question. Suppose I have the following HTML: <div style="width: 500px;"> <input class="full" /> </div> And the corresponding CSS: input { width: 100%; } .full { ...

htmlcssbrowsercross-browser

Select a particular column (utilizing CSS multi-column functionality)

I want to style the second column in a text block with two columns using CSS or JavaScript. How can I achieve this without creating separate containers for each column? I'm aware that I could create two containers and target the second one for styling ...

javascripthtmlcss

Is it possible to implement a loading animation that remains visible until the entire page has finished loading?

After deploying my website on netlify, I noticed that only the HTML content is displayed until the page finishes loading. Does anyone have advice on how to make the website visible only after it has fully loaded? I have created a custom loading animation, ...

javascripthtmlcss

Using CSS to repeat a background image horizontally starting from a specified position

I am currently working on styling an h2 element with a 2px background image. My goal is to have the image start right after the text in the h2 and repeat horizontally for the rest of the space within the h2. However, due to varying word lengths, I cannot s ...

htmlcssbackground-image

What is the correct way to implement overflow-y: auto for vertical flex-items?

Check out this interactive example. Here is the HTML code: <div class="overflow"> <div class="block"> <div class="header"> This is a green header </div> <div class="content&q ...

htmlcssflexbox

A comprehensive guide to utilizing VueJS for creating dynamic lists

I am trying to associate my timer with a list in my project <div class="row row-cols-2 justify-content-md-center" v-else-if="timerData.length <= 4" style="height: 100vh; background: none"> <div v-for="(t, in ...

javascriptcssnode.jsvue.jsvuejs3

Tips for vertically aligning elements within the body while excluding the navbar from being centered

On my webpage, I have a navigation bar and a lot of content. The code structure looks something like this: .container { display: flex; justify-content: center; align-items: center; } <div class="navbar"> <!-- Various links for navigation ...

htmltwitter-bootstrapcssflexbox

What is the best way to evenly distribute dynamic divs in a vertical layout?

Essentially, my goal is to have the child divs evenly spread out within the parent div. If one of the child divs is removed, I want the remaining divs to resize and fill the space equally again. For example: ---parent--------------- | ----------------- ...

htmlcss

What is the best way to change the row background color in an ng-prime datatable with dynamically changing columns?

Is there a way to dynamically change row colors in a table when a row is updated successfully? <p-dataTable emptyMessage="{{tbldatamsg}}" [value]="dataset" scrollable="true" [style]="{'overflow':'hidden!important'}" ...

htmlcssangularprimeng-datatable

Is there a quick method to enhance the spacing between the buttons to give them a more polished and professional appearance without investing four hours of time?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Puggy Adventure Website</title> <link rel="stylesheet" ...

htmlcss

Adjust the text color to complement the shifting background shade

I'm looking to customize the hover color of my links to match the constantly changing background. You can view my progress on this in the JSFiddle linked below: https://jsfiddle.net/Lcz7gk72/ Essentially, I want the "[email protected]" text to b ...

javascripthtmlcss

positioning elements within a div in the center

I am facing an issue with centering the contents of a div Despite trying various methods, I am unable to center the images. The structure I have is as follows: <div class="middleSlideContents"> <div class='image'> <im ...

jquerycsshtmlalignment

The 'refresh' function in jQM listview is causing issues with inset lists

For some reason, I am struggling to understand why this issue is occurring: In jQuery Mobile, I have an unordered list with data-inset="true". Initially, it displays perfectly with rounded top and bottom edges. However, on dynamically adding new elements t ...

jqueryhtmlcssjquery-mobile