How to center View order Buttons on e-mail Notifications on desktop view?

IlkinAgayev · ‎02-25-2021

Hey there,

I´m struggling a little bit with my coding skills in css.

This is the problem the "view Order buttons" and "back to shop" link are centered on mobile but not on desktop. On desktop it is shown left no matter what I do.

Myabe someone has/had the same problem.

Here is the coding (its not the full code its just the important part of it):

{% capture email_title %}Vielen Dank für deinen Einkauf! {% endcapture %}
{% capture email_body %}
{% if requires_shipping %}
{% case delivery_method %}
{% when 'pick-up' %}

Du erhältst eine E-Mail, sobald deine Bestellung zur Abholung bereit ist.
{% when 'local' %}
Hallo {{ customer.first_name }}! Wir bereiten Ihre Bestellung gerade für die Zustellung vor.
{% else %}
Hallo {{ customer.first_name }}! Unser Team wird nun deine Bestellung schnellstmöglich für den Versand vorbereiten. Wir benachrichtigen dich, sobald die Bestellung verschickt wurde.
{% endcase %}
{% if delivery_instructions != blank %}
<p><b>Informationen zur Zustellung:</b> {{ delivery_instructions }}</p>
{% endif %}
{% endif %}
{% endcapture %}
<style>
@media (min-width: 320px) {
.order-number__cell, h2 {
text-align: center !important;
}
</style>
<!DOCTYPE html>
<html lang="de">
<head>
<title>{{ email_title }}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">
<style>
.button__cell { background: {{ shop.email_accent_color }}; }
a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
</style>
</head>

<table class="row">
<tr>
<td class="shop-name__cell" style="text-align:center; display:block">
{%- if shop.email_logo_url %}
<img src="{{shop.email_logo_url}}" alt="{{ shop.name }}" width="{{ shop.email_logo_width }}">
{%- else %}
<h1 class="shop-name__text">
<a href="{{shop.url}}">{{ shop.name }}</a>
</h1>
{%- endif %}
</td>

<span class="order-number__text">
Bestellung {{ order_name }}
</span>
</td>
</tr>
</table>

</td>
</tr>
</table>

</center>
</td>
</tr>
</table>

<table class="row content">
<tr>
<td class="content__cell">
<center>
<table class="container" style="text-align: center">
<tr>
<td>

<h2>{{ email_title }}</h2>
<p>{{ email_body }}</p>
{% if order_status_url %}
<table class="row actions">
<tr>
<td class="empty-line"> </td>
</tr>
<tr>
<td class="actions__cell" style="style="text-align:center;display: inline-table;">
<table class="button main-action-cell">
<tr>
<td class="button__cell"><a href="{{ order_status_url }}" class="button__text">Bestellung ansehen</a></td>
</tr>
</table>
{% if shop.url %}
<table class="link secondary-action-cell">
<tr>
<td class="link__cell">oder <a href="{{ shop.url }}">Zu unserem Shop</a></td>
</tr>
</table>
{% endif %}

</td>
</tr>
</table>

{% else %}
{% if shop.url %}
<table class="row actions">
<tr>
<td class="actions__cell">
<table class="button main-action-cell">
<tr>
<td class="button__cell"><a href="{{ shop.url }}" class="button__text">Zu unserem Shop</a></td>
</tr>
</table>
</td>
</tr>
</table>
{% endif %}

{% endif %}

Hope somebody can help me out.

malibustacey · ‎02-29-2024

Same! Did you ever find a solution? This is driving me nuts.

How to center View order Buttons on e-mail Notifications on desktop view?

How to center View order Buttons on e-mail Notifications on desktop view?

Community Blog Articles