Search code examples
htmlcssbootstrap-4

Convert HTML resume to pdf without any change in template

I tried to convert this html resume to pdf and print it but as you see there is a problem in template after changing. For example compare skills in both html version and pdf version.

This is Github repo of this project: https://github.com/xriley/DevResume-Theme And this is a sample of HTML file: https://themes.3rdwavemedia.com/demo/devresume/

How can I fix it for ever?

I need this: https://themes.3rdwavemedia.com/wp-content/uploads/2019/04/DevResume-Sketch-Template-PDF-Preview.pdf

Solution

  • Solution 1 - Without Coding:

    You can select margins as custom from more settings to make changes for each page accordingly.

    enter image description here

    Then you can drag these blue dotted borders to adjust text based on your need.

    As i have drag thelower border upward to make senior developer text to appear in next page.

    enter image description here enter image description here

    Solution 2 - With Coding:

    Simply adjust margins for each page from solution 1.

    Then by using the @page in your CSS. You can modify margins when printing a document. You can't change all CSS properties with @page. Only few properties such as margins while printing the page etc.

    @page:first {         <-----  first here is refering to only First Page
 margin-left: 0.75cm;
 margin-top: 0.25cm;
 margin-bottom: 0.25cm;
 margin-right: 0.75cm;
}

    If you want to apply margins on all page then simply do this:

    @page { your margins values }

    You can read more about @page property here.