"Create a web resume that is easy to print and

I'm currently working on implementing a print-friendly feature for a Bootstrap 4 template resume/CV. My goal is to minimize the spacing between sections when the document is printed, allowing users to easily convert it into a PDF or Word format.

You can check out my website here: And my GitHub repository here: https://github.com/sheldonmaschmeyer/website-sheldon I've made some modifications to the resume.min.css file to make the page more printer-friendly, but there are still some issues that need to be addressed. My ultimate aim is to create a seamless printing experience that eliminates the need for multiple versions of the document due to changes in platforms like LinkedIn.

Here's what I've done so far:

@media print {
  @page {
    size: Letter portrait;
    margin-top: 1.5cm;
    margin-bottom: 1.5cm;
    margin-left: 1.5cm;
    margin-right: 1.5cm;
  }
  h1,
  h2,
  h3,
  h4,
  h5 {
    page-break-after: avoid;
  }
  section.resume-section {
    page-break-before: avoid;
    page-break-inside: avoid;
    page-break-after: avoid;
  }
}

The @page section adjusts the positioning of dates on the page, which is not desired. The spacing between each section is too wide for printing purposes. I plan to tweak the font sizes after resolving the spacing issue, with the end goal being to condense the content into two pages while ignoring the 'Services' section.

In essence, the current print preview shows excessive section spacing that needs to be minimized. While the design looks great on screen, it doesn't translate well to paper. You can find the style sheet I'm using here: https://github.com/sheldonmaschmeyer/website-sheldon/blob/master/css/resume.min.css

Check out the Chrome screenshot of the print preview here: Print-Preview in Chrome screenshot

Answer №1

Successfully resolved the issue after taking some time to ponder over it.

@media print {
  @page {
    size: US Letter, Portrait;
    margin: 0.5cm;
  }
  body {
    padding-top: 6rem!important;
  }
  h1,
  h2,
  h3,
  h4,
  h5 {
    page-break-after: avoid;
  }
  .m-0,
  .m-0 *,
  .dont-print,
  .dont-print * {
    display: none!important;
  }
  section.resume-section {
    margin-top: -10rem!important;
    padding-top: 0rem!important;
    padding-bottom: 0rem!important;
    page-break-after: avoid;
  }
}

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 method for updating the value of the Sass variable in Angular 4?

Within the file app.component.scss, there is a variable named $color that has been set to 'red'. What steps can be taken within the file app.component.ts in order to access this variable and change its value to 'green'? ...

Is it possible to run a Vue file autonomously, similar to an HTML file

When it comes to running html, we can rely on mainstream browsers such as Chrome. But is there a similar tool for vue files, like the browsers designed for html? ...

The combination of Chromium, raw HTML pulled directly from a C# string, and Angular leads to issues when trying to implement routing

CefSharp: 1.25.0 (Chromium 25.0.1364.152-based) Angular: 1.3.0-beta16 UIRouter: 0.2.10 Currently, I am in the process of creating a C# application that will function as a standalone program using CefSharp Chromium, Angular, and UIRouter for the graphical ...

Tips on concealing the overflow content within a Material UI table cell, rather than allowing it to wrap around

I have been trying to use the material UI Table component in order to display a table. The issue I am facing is that when the content in a cell exceeds the allotted space, instead of showing ellipses (...), the text wraps within the cell. I attempted to ap ...

Struggling with updating the background color of multiple HTML elements with the same class in real-time

I'm facing an issue with dynamically updating background colors of specific elements using ajax, JSP, and a servlet call. Even though all the lines of code seem to be executing, there is no visible change on the front end. I've attached my JS fun ...

Stop Gmail from Removing Attached HTML Files

I successfully developed an HTML file with its own CSS styling and custom HEAD tags to ensure it displays well in mobile browsers. I managed to make it work with PHP as a file attachment. However, the issue arises when Gmail distorts the view of the file ...

The BorderWidth property is set to 2px, however, it is not visible on the

Struggling with adding a border to a div in my app built with react and material-ui. Here is the snippet of code I've been working with: <div className={classes.search}> ... </div> search: { ... borderWidth: '2px', borde ...

Tips for effectively deleting a flash object from an HTML page

I recently created a website with AJAX (using jquery) for navigation purposes. The pages on the site slide smoothly, and I have been using remove() to get rid of the old page. Everything was working fine until I encountered an issue where the browser cras ...

The reveal/conceal feature will not reveal all elements at the outset

I've been working on implementing a show/hide elements filter. However, I'm facing an issue where all elements that are supposed to display initially are hidden instead. Additionally, the 'active' class is not being properly removed or ...

Navigate to a different webpage while employing sweetalert2 and extracting data using the GET method

Is there a way to use sweetalert2 for redirecting to deleting.php with a specific ID parameter? How can I include this dynamic data in the code snippet below, which is used to display options for editing and purging data from an SQL database? echo' &l ...

Submitting an AJAX form redirects to a different page instead of keeping the user on the current page

I've encountered an issue with my popup ajax form. Instead of staying on the same page after data submission, it redirects me to send.php file. This behavior is different from another website where I successfully implemented a similar form. I'm n ...

Media queries for the header background image display

I am currently working on a small web project and I want to change the background image in the header section while also making it responsive. I attempted to use a class called "header_accueil" in my header to distinguish different sections of the site, bu ...

Programmatically extracting a list of utilized CSS images from IE WebBrowser (IHTMLDocument2)

Exploring the IHTMLStyleSheetsCollection, IHTMLStyleSheet, IHTMLStyleSheetRulesCollection etc. of IHTMLDocument2 to compile a list of all styles in the current document is quite simple. Does anyone have any suggestions on how to generate a list of only th ...

Issue with Jquery .on() causing toggleClass function to not trigger

Adding a column dynamically to a table on click with JS/Jquery is achieved as demonstrated below $("#btn").click(function(){ $('#week_title').append('<th>Week '+count+'</th>'); count++; $('.tag&ap ...

What is the method for activating scrolling in an inner div instead of the browser window?

In the code snippet provided, I am encountering an issue where the browser window scrolls instead of the specified div with overflow-y: scroll when minimizing the browser window. How can I ensure that scrolling occurs within the div itself without making ...

Incorporating descriptions below the images within this JavaScript carousel

I'm struggling to add text under the images in this slider. The functionality is simple, but I can't figure it out. I might have to rewrite it. Here's the HTML and JS: <div id="look-book-scroll"> <a href="javascript:;" id="lookbo ...

If tall, then the height is set to 100%; if wide, then the width is set

My image-generating algorithm produces images of various sizes, some tall and some wide. How can I ensure that the images always fit perfectly within their parent container? They should be 100% height if they are tall and 100% width if they are wide. .im ...

Learn the process of updating a specific section of a Facebook share link using AJAX dynamically

Here's an interesting scenario I'm dealing with. I'm trying to create a modification to the Facebook share button link where a portion of the link is replaced by a user ID number. This way, when someone clicks on the shared link, it will dir ...

The issue of the responsive navigation bar overlapping the header and navigation links not functioning properly

Hello everyone, I need some help with my website! I can't seem to find the answer on my own. I'm currently working on making my website responsive, but I've run into an issue with the mobile navigation on phones. The navigation links are ov ...

Is your Jquery validation malfunctioning?

I am currently facing a challenge with required validation on an asp.net page. In order to validate the inputs, I have implemented multiple controls which can be hidden or displayed based on certain conditions. These controls include checkboxlists, dropdow ...