Padding on Order Confirmation email

Store Design

Topic summary

A user is experiencing layout issues with their order confirmation email on mobile devices:

Mobile-specific problems:

  • Insufficient padding between the logo and “Thank You For Your Purchase!” text
  • Order number appears cramped and needs repositioning below the logo
  • Customer information (billing/shipping addresses) stacks vertically instead of displaying side-by-side like on desktop

Current status:

  • Desktop view displays correctly
  • User attempted to share code but encountered posting restrictions on the forum
  • An attached screenshot shows the mobile layout issue

Proposed solutions:

  • One responder offered to review the code via direct message
  • Another support team member requested access to the full notification template code through Shopify admin (Settings > Notifications > Order confirmation)

Discussion remains open pending code sharing to diagnose the CSS adjustments needed for mobile responsiveness.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hi

I’ve tried listing below the coding used on my order confirmation but apparently it contains something which isn’t allowed on here so I can’t post.

I’d really like there to be more padding between the logo and the Thank You For Your Purchase! on the mobile view. I’d also like the order number to be moved down to under the logo as it looks really cramped. This all looks fine on the desktop so it’s just the mobile that needs adjusting, do you know what part of the code I’d need to change?

Also, on the desktop the customer information (billing and shipping address) displays side by side but on mobile they’re on top of each other. Is there a way to make them side by side on mobile too?

Thanks

IMG_0247.jpeg
IMG_0247.jpeg1170×636 46.9 KB

2

Hi! It seems like you’re trying to share your code for the order confirmation page, but certain elements might be restricted or flagged by the platform. If you’re unable to post the code directly, you can message me directly to talk on it better more.

3

Hi @Angie_Freese

Could you please go to Shopify admin setting > Notification > Order confirmation > Edit code here: https://prnt.sc/D8qArL4bjp0D and share with me all the codes there in the doc?

Looking forward to hearing from you soon. Thank you!

Best,
Daisy - Avada Support Team.