Troubles with XS & SM screen sizes when printing

Currently, I am facing an issue specifically on XS or SM screen sizes.

For printing purposes, I have a specific style that I implement on my pages and I included the following code within @media print {}

.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
     float: left!important;
}
.col-sm-12 {
     width: 100%;
}
... (and so on for all col-sm classes)

Despite everything appearing correctly when printing from MD screens and above, any attempt to print from SM and below results in everything being zoomed out to the top left corner of the page. The output looks similar to this:

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

Is there a solution available to ensure consistent MD format printing regardless of the screen size?

Answer №1

give the @page a shot

The @page command in CSS is employed to alter certain CSS properties while printing a document.

@page{
margin:0mm;
}

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

jQuery Each Loop failing to retrieve data during iteration

Encountered a peculiar issue while working with an each loop. The situation may seem a bit tangled but I'm constrained to manipulating the code with jQuery due to it being part of a larger framework that can't be modified. As a way to simplify t ...

AngularJS: resolving route dependencies

I have a variable $scope.question that contains all the questions for the page. My goal is to loop through the questions page by page. To achieve this, I created a function called questionsCtrl and I am calling this function in the config while setting up ...

Deleting data via an Ajax call in CakePHP

Looking to implement an ajax delete function that prompts for confirmation before sending the request. Currently, the record is successfully deleted, but the issue arises when the view doesn't update immediately after deletion; requiring a manual page ...

What is the best way to customize the appearance of these two images within a div element?

While working on a small website project during my internship, I initially used an inline stylesheet. However, upon my boss's recommendation, I switched to an external stylesheet. Now, I'm trying to figure out how to style the two images within d ...

What methods can be used to modify element attributes in Python?

I'm curious about how to utilize Python to modify an element in the HTML code of a webpage: In this case, I need to change it from: <input _ngcontent-mcp-c552="" type="number" name="bpm" placeholder="0" min= ...

Achieving consistent outcomes across various devices: What's the secret?

Hey there, I am facing an issue with my form page that I created using HTML, CSS, and Javascript. It looks good on my computer but appears messy on a mobile phone. The elements are getting out of the white box (div) making the entire page look chaotic. Sin ...

Streamlining all icons to a single downward rotation

I am currently managing a large table of "auditpoints", some of which are designated as "automated". When an auditpoint is automated, it is marked with a gear icon in the row. However, each row also receives two other icons: a pencil and a toggle button. W ...

Get rid of the standard shadow located on the bottom and right of the input text field

My input fields have some border rounding and are displaying an unwanted shadow on the right and bottom. I've tried using the box-shadow property to control the width, color, and other properties of the shadow, but it's not working as expected. H ...

Tips for positioning a DIV element in the middle of the available empty space using Bootstrap version 5.1

As a beginner in front-end development, I'm currently working on my website to showcase my Blockchain projects. Right now, my goal is to align the text "Technology is my Passion" in the center of the remaining free space. How can I achieve this with ...

What is the best way to retrieve data from a single table while also obtaining all connected records from a separate table?

I am attempting to simplify my inquiry as much as possible, hoping that my explanation will bring clarity. Here is the situation: I have two tables: tbl_instructors, which contains information about instructors such as ID and name, and tbl_advisory, whic ...

Having trouble implementing the center edge effect in this CSS design

Looking for help with CSS to center the edges of a family tree design. Has anyone experience in working on styling family trees? *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .tree { ...

What is the best way to implement CSS rules for a hidden submenu?

Can anyone help me figure out how to apply CSS rules for a hidden submenu? I've attempted to use some JavaScript, but it's not working as expected. Below is a sample of the code I'm working with. The idea is that when you click on the anchor ...

Guide on adding font face to mui theme

I have a font-face defined in the index.css file. I am looking to move this configuration from the CSS file to a theme.js file created as part of my MUI library implementation. How can I achieve this? // index.css @font-face { font-family: 'ATTAlec ...

Handling overflow and z-index of tabs in Vuetify Drawer

Struggling to create an expandable sidebar menu using Vuetify2, following the documentation, but unable to prevent the expanded menu from overlapping other elements on the page. The current behavior causes items to be pushed away and wrap onto the next ro ...

Can you modify a WordPress/WooCommerce title written in uppercase to display in proper capitalization?

My current project is centered around WordPress and utilizes WooCommerce as its e-commerce platform. I recently migrated products from an old site where the product titles were written in uppercase. At the moment, my HTML code for the product titles looks ...

Is your email showing up with an unknown sender when using the display function?

I'm facing an issue where the name entered in the input field on a contact form is not being displayed after submitting the email. The headers in PHP were changed and now it shows "unknown sender" instead of the name that was entered. How can I fix th ...

Step-by-step guide to creating a transition effect when the input changes

I'm looking to add a unique effect to my dropdown menu My goal is to create an effect in which the placeholder moves up and the new value seamlessly takes its place, using JS, jQuery, CSS, and HTML. View before transition View after transition ...

The function jQuery .css('border') fails to return any value when used in Firefox

Currently, I am designing a webpage that includes textareas. Several of these textareas are styled with a unique class called "whitebord" which has the following CSS properties: textarea.whitebord, textarea.whitebord:focus { border: 1px solid #fff; ...

Markdown boasts of a sturdy partially-horizontal line

Is there a way to create a partially colored line in Markdown? I attempted using the following code: <hr style="border:0.3px solid green; width:40%"> </hr> However, instead of a partial green line, I am seeing a full gray line. Any idea on w ...

Make sure the image is aligned in line with the unordered list

I've been having trouble trying to display an image inline with an unordered list. Here's the HTML code: <div class="customer-indiv man"> <a class="customer_thumb" href="/fan/332profile.com"> <img src="http://i.imgur.com/Wi ...