On creating invoice

Payments + Shipping & Fulfilment
1

Hi there, i recently building shopify store where my invoice is not correct when i check in mobile but the deskstop view is fine can i get any solution for this

2

Usually that is a fixed-width invoice template. If it is Order Printer, open Apps > Order Printer > Templates and swap any hard pixel widths for max-width: 100%. Same trick if it is the Order confirmation email under Settings > Notifications.

3

Hi @pavan_sShopify, before changing the code, could you clarify where this invoice is displayed: on a storefront page, in an order email, or as a PDF generated by an invoice app?

The existing fixed-width suggestion is a good starting point, but each case uses a different template. Please share a mobile screenshot with personal information hidden, along with the invoice app or template name. That will make it possible to identify the exact element causing the mobile layout issue.

4

Hi there,

I have shared both images with you. Please note that I do not use an invoice app to convert them to PDF; the invoice is currently in HTML format.

(attachments)

mobile invoice.jpeg
mobile invoice.jpeg712×1362 106 KB

desktopinvoice.png
desktopinvoice.png676×794 37.5 KB

5

Thanks for confirming. Since it is HTML-based, the issue is most likely caused by a fixed-width table, inline width, or an image that does not shrink on smaller screens.

To identify the exact fix, could you paste the relevant invoice HTML/CSS or tell me which Shopify template or page renders it? Please remove any customer and order information before sharing. Once I can see the markup, I can point out the precise responsive CSS changes.

6

Hi Lucas,

No template from the order page was used after reviewing the invoice. The HTML/CSS code is included in the document I previously sent over.

Best regards,
Pavan

(Attachment ShopifyInvoice.txt is missing)

7

Two elements lose their background on the phone:

  • the band behind your logo and INVOICE, and the Grand Total row.
  • The white text is still there, sitting on nothing.

Everything else is good, nothing overflows, and the BILL TO bar and the table header keep their green.

Your phone screenshot: the two blocks whose green fill did not paint
Your phone screenshot: the two blocks whose green fill did not paint961×1838 225 KB

So the fixed-width table answer does not apply here. Your layout already reflows.

Where to look

  • Search your invoice CSS for @media. Something inside it is clearing the background on those two blocks.
  • The usual culprits are background: none, background: transparent, or a background shorthand on a wrapper that resets the colour.

The fix

Paste this at the very end of your stylesheet, after every other rule, with your own class names:

@media (max-width: 600px) {
  .invoice-header,
  .grand-total {
    background: #1E5B33 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

Notes: Browsers drop background fills there by default and you get the same white-on-white result.

The same fault reproduced at 390px, and the same page after the fix
The same fault reproduced at 390px, and the same page after the fix1892×946 276 KB

You can check it yourself:

  • Open the invoice on desktop and press F12.
  • Click the phone icon at the top left of the panel and pick any iPhone.
  • The band disappears at the same width your phone uses.
  • Click the band, look at Styles, and the rule striking out the green is the one to change.

Alterntatively use the apps

  • WebPlanex: GST Invoice India
  • Order Printer Pro
  • Vify Order Printer

Regards,
Ploqo

8

Hi @pavan_sShopify, thanks. The thread currently shows “ShopifyInvoice.txt is missing,” so I cannot access the HTML/CSS. Could you re-upload it as a TXT or ZIP file, or paste the relevant header, grand-total, and media-query CSS after removing customer and order information? With the actual selectors, I can verify the exact mobile rule instead of guessing.