• Resolved scruffy1

    (@scruffy1)


    Hi,

    We love this plugin and it is one of the most useful plugins we have.

    After we had to move from the Safari browser because of (Apple) DNS issues, we moved to Firefox browser and suddenly the print invoice margins increased to make printed page too narrow and text became extremely small for customers to read. We also tried Vivaldi browser and had same result.

    We are at a loss of what to do because I would assume CSS is the same accross all browsers.

    Any advice is most welcome

    Thanks Tracey

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support kenil802

    (@kenil802)

    Hi @scruffy1,

    Thank you for appreciating our plugin.

    I have tried to replicate your issue on our staging site but I am not able to replicate it. To me, when I tried to see the print invoice on another browser, no change is there in the CSS.

    So, could you please share the screenshot of the issue which you are facing so that we can check and let you know.

    Regards,
    Kenil Shah

    Thread Starter scruffy1

    (@scruffy1)

    Hi Kenil,

    Thanks for the reply. There does not appear to be an image upload on the forum, so I will post the CSS code for you.

    Thanks Tracey

    /* Simple CSS Reset and Print options
    ------------------------------------------*/
    
    html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, table, ol, ul, dl, li, dt, dd {
    	border: 0 none;
    	font: inherit;
    	margin: 0;
    	padding: 0;
    	vertical-align: baseline;
    }
    
    body {
    	line-height: 1;
    }
    
    ol,
    ul {
    	list-style: none;
    }
    
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    
    /* Template Page Layout
    ------------------------------------------*/
    
    /* Main Body */
    body {
    	background: #fff;
    	color: #333;
    	font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
    	font-size: 98%;
    	line-height: 1.25em;
    }
    
    h1,
    h2,
    h3,
    h4 {
    color: red;
    	font-weight: bold;
    	margin-bottom: 1em;
    }
    
    ul {
    	margin-bottom: 1.25em;
    }
    
    li,
    dt,
    dd  {
    	padding: 0.375em 0;
    }
    
    dt {
    	font-weight: bold;
    }
    
    p + p {
    	margin-top: 1.20em;
    }
    
    address {
    	font-style: normal;
    }
    
    /* Basic Table Styling */
    table {
    	page-break-inside: auto;
    	width: 100%;
    }
    
    tr {
    	page-break-inside: avoid;
    	page-break-after: auto;	
    	border-bottom: 0.10em dotted #ccc;
    }
    
    td,
    th {
    color: #333;
    	padding: 0.375em 0.75em 0.375em 0;
    	vertical-align: top;
    }
    
    td img,
    th img {
    	vertical-align: top;
    }
    
    th {
    	color: #333;
    	font-weight: bold;
    	text-align: left;
    	padding-bottom: 1em;
    }
    
    tfoot {
    	display: table-row-group;
    }
    
    /* Page Margins & Basic Stylings */
    #page {
    	margin-left: auto;
    	margin-right: auto;
    	text-align: left;
    	font-size: 0.875em;
    }
    
    .content {
    	padding-left: 10%;
    	padding-right: 10%;
    	padding-top: 3%;
    	padding-bottom: 3%;
    }
    
    .content + .content {
    	page-break-before: always;
    }
    
    h1,
    h2 {
    	font-size: 1.50em;
    }
    
    .order-branding,
    .order-addresses,
    .order-info,
    .order-items,
    .order-notes,
    .order-thanks,
    .order-colophon {
    	margin-bottom: 3em;
    }
    
    .order-items {
    	page-break-before: auto;
    	page-break-after: auto;
    }
    
    /* Order Branding */
    .order-branding .company-logo {
    	margin-bottom: 0.5em;
    	float: right;
    	width: 52%;
    	/*margin-left: 40em;*/
    }
    
    /* Order Addresses */
    .order-addresses {
    	margin-bottom: 6em;
    }
    
    .order-addresses:after {
    	content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    
    .billing-address {
    	width: 50%;
    	float: left;
    }
    
    .shipping-address {
    	width: 50%;
    	float: left;
    	font-size: 1.5em; /*font size for delivery address and heading */
    }
    
    .order-addresses.no-shipping-address .shipping-address {
    	display: none;
    }
    
    /*
    .order-addresses.no-shipping-address .billing-address {
    	margin-left: 50%;
    }
    */
    
    /* Switch the addresses for invoices */
    
    /* Order Info top line*/
    .order-info ul {
    	border-top: 0.20em dotted #ccc;
    	width: 55%;
    }
    /* top part of delivery note and font color */
    .order-info li {
    	color: #666;
    	font-size: 0.85em;
    	border-bottom: 0.10em dotted #ccc;
    	width: 55%;
    }
    
    .order-info li strong {
    	min-width: 35%;
    	display: inline-block;
    	white-space: nowrap;
    	text-overflow: ellipsis;
    	overflow: hidden;
    	margin-bottom: 0;
    	/*padding-right: 0.35em;*/
    }
    
    /* Order Items size of table for bottom section*/
    .order-items {
    	margin-bottom: 1em;
    	width: 90%;
    }
    
    .order-items .head-name,
    .order-items .product-name,
    .order-items .total-name {
    	width: 60%;
    }
    
    .order-items .head-quantity,
    .order-items .product-quantity,
    .order-items .total-quantity,
    .order-items .head-item-price,
    .order-items .product-item-price,
    .order-items .total-item-price {
    	width: 20%;
    }
    
    .order-items .head-price,
    .order-items .product-price,
    .order-items .total-price {
    	width: 20%;
    }
    
    .order-items p {
    	display: inline;
    	font-size: 0.785em;
    	font-weight: normal;
    }
    
    .order-items small,
    .order-items dt,
    .order-items dd {
    	font-size: 0.785em;
    	font-weight: normal;
    	color: red;
    	line-height: 130%;
    	padding: 0;
    	margin: 0;
    }
    
    .order-items dt,
    .order-items dd {
    	display: block;
    	float: left;
    }
    
    .order-items dt {
    	clear: left;
    	padding-right: 0.2em;
    }
    
    .order-items tfoot tr:first-child,
    .order-items tfoot tr:last-child {
    	font-weight: bold;
    }
    
    .order-items tfoot tr:last-child .total-price .amount:first-child {
    	font-size: 1.273em;
    	font-weight: bold;
    	line-height: 200%;
    }
    
    .order-items tfoot tr:last-child {
    	border-bottom: 0.20em dotted #ccc; /* bottom line */
    }
    
    /* Order Notes */
    .order-notes {
    	margin-top: 3em;
    	font-size: 0.785em;
    	line-height: 140%;
    	margin-bottom: 4em;
    }
    
    .order-notes h4 {
    	margin-bottom: 0;
    }
    
    /* Order Thanks */
    .order-thanks {
    	margin-left: 50%;
    }
    
    /* Order Colophon */
    .order-colophon {
    	font-size: 0.585em;
    	line-height: 120%;
    	margin-bottom: 0;
    }
    
    .colophon-policies {
    	margin-bottom: 1.20em;
    }
    
    /* CSS Media Queries for Print
    ------------------------------------------*/
    
    @media print {
    	body {
    		font-size: 7.5pt;
    	}
    	
    	.content {
    		/* Remove padding to not generate empty follow up pages */
    		padding-bottom: 0;
    	}
    }
    
    Plugin Support kenil802

    (@kenil802)

    Hi @scruffy1,

    Sorry for the delay in response.

    Regarding the query, when the print popup comes up we have the option to set the margins you want. So, could you please those and let us know whether it worked for you or not.

    Regards,
    Kenil Shah

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Issues with two browsers on print invoice/delivery note’ is closed to new replies.