Button not centering in email notification

New Member
2 0 0

Hi there,

I'm having trouble centering a "button__cell" in the gift card notification.

I have added the following CSS in <style> :

td {text-align: center;}

The whole notification is correctly centered, except for the <td class="button__cell"><a href="{{ gift_card.url }}" class="button__text">Afficher la carte-cadeau</a></td>

I've been trying to

- add CSS rule directly in the html code,

- td align="center"

- adding margin: 0;position: absolute;top: 50%;left: 50%; to .button__cell style

- display:block

- position:absolute

 but nothing as worked so far...

Would greatly appreciate your help on this

Very Best

Thomas

0 Likes
Highlighted

Hello @THL 

Please share your store URL and reference site URL.

So that I can check and let you know the exact solution for this.

Thanks...

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
2 0 0

Hi @oscprofessional 

Website is not live yet.

The issue is on an automatic email notification received by a client after purchasing a gift card.

Liquid hereunder (in bold blue, the CSS I have added to center the email) :

{% capture email_title %}
Votre carte-cadeau
{% endcapture %}
{% capture email_body %}
{% if gift_card.expires_on %}
Votre carte-cadeau d'un montant de {{ gift_card.balance | money_without_trailing_zeros }} pour la boutique {{ shop.name }} est active. Conservez cet e-mail ou notez le numéro de votre carte-cadeau. Cette carte-cadeau expire le {{ gift_card.expires_on }}.
{% else %}
Votre carte-cadeau d'un montant de {{ gift_card.balance | money_without_trailing_zeros }} pour la boutique {{ shop.name }} est active. Conservez cet e-mail ou notez le numéro de votre carte-cadeau.
{% endif %}
{% endcapture %}

<!DOCTYPE html>
<html lang="fr">
<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 }}; }
td {font-family:playfairdisplay;text-align: center;}
</style>
</head>

<body>
<table class="body">
<tr>
<td class="empty-line"> </td>
</tr>
<tr>
<td class="empty-line"> </td>
</tr>
<tr>
<td>
<table class="row content">
<tr>
<td class="content__cell">
<center>
<table class="container">
<tr>
<td>

<h1>{{ email_title }}</h1>
<table class="row actions">
<tr>
<td class="empty-line"> </td>
</tr>
</table>

<img src="{{ 'coucibas-cadeau.jpg' | asset_img_url: '1024x1024' }}" alt="Image de carte-cadeau" width="240" height="240">
<table class="row actions">
<tr>
<td class="empty-line"> </td>
</tr>
</table>

<p>{{ email_body }}</p>

<table class="row actions">
<tr>
<td class="empty-line"> </td>
</tr>
<tr>
<td class="actions__cell">
<table class="button main-action-cell">
<tr>
<td class="button__cell"><a href="{{ gift_card.url }}" class="button__text">Afficher la carte-cadeau</a></td>
</tr>
</table>
</td>
</tr>
</table>
<br />

{% if gift_card.pass_url %}
<a href="{{ gift_card.pass_url }}" class="apple-wallet-button">
<img src="{{ 'gift-card/add-to-apple-wallet.png' | shopify_asset_url }}" alt="Add to Apple Wallet" width="120" height="40">
</a>
{% endif %}

</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row footer">
<tr>
<td class="footer__cell">
<center>
<table class="container">
<tr>
<td>

<p class="disclaimer__subtext">Si vous avez des questions, veuillez répondre à cet e-mail ou nous contacter à <a href="mailto:{{ shop.email }}">{{ shop.email }}</a></p>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>

<img src="{{ 'notifications/spacer.png' | shopify_asset_url }}" class="spacer" height="1" />

</td>
</tr>
</table>
</body>
</html>

Hereunder the result : everything is centered, except the CTA button :

Capture d’écran 2020-07-28 à 15.49.17.png

Thanks for your help

0 Likes