Need help with editing gift card email template

Store Design
1

Hi, I know I have asked this before, but I am looking to see if anyone could solve an issue on my gift card email template that gets sent to my customers. I would like for it to be fixed in a timely manner before sending out my first gift card!

The 16 digit code that is assigned to the gift cards is placed on top of my custom gift card image and covers up a portion of the image, which I don’t want. If someone knows if there is a way to move the 16 digit code off of the gift card image, it would be greatly appreciated. I am using Brooklyn theme and will paste the code for ‘gift-card.scss.liquid’ template below, as well as attach a screenshot of what I am talking about.

Screen Shot 2021-12-12 at 12.01.22 PM.png
Screen Shot 2021-12-12 at 12.01.22 PM.png1120×1180 96.1 KB

/*============================================================================
Table of Contents

#General Variables
#Sass Mixins
base Styles
#Media Queries
#Print Styles
#Keyframe Animations
==============================================================================*/

/============================================================================
#General Variables
==============================================================================/
// Timber Colors
$colorBody: {{ settings.color_body_bg }};
$colorBorder: {{ settings.color_borders }};

// Gift Card Colors
$colorGiftText: {{ settings.color_body_text }}; // note, this is always on a white background
$colorGiftBorder: {{ settings.color_primary }};

// Sizes
$gutter: 30px;

/*============================================================================
#Sass Mixins

  • Copied from timber.scss.liquid
    ==============================================================================*/
    .clearfix {
    &:after {
    content: “”;
    display: table;
    clear: both; }
    *zoom: 1;
    }

@mixin clearfix() {
&:after {
content: “”;
display: table;
clear: both; }
*zoom: 1;
}

@mixin prefix($property, $value) {
-webkit-#{$property}: #{$value};
-moz-#{$property}: #{$value};
-ms-#{$property}: #{$value};
-o-#{$property}: #{$value};
#{$property}: #{$value};
}

/============================================================================
base Styles
==============================================================================/
.template-giftcard,
.template-giftcard body {
background: $colorBody;

a {
text-decoration: none;
}
}

.template-giftcard .wrapper {
max-width: 588px;

img, object, iframe {
max-width: 100%;
}
}

.giftcard-header {
padding: ($gutter * 2) 0;
font-size: 1em;
text-align: center;
-webkit-animation: fadein 0.5s ease-in-out both 0.4s;
animation: fadein 0.5s ease-in-out both 0.4s;
}

.shop-url {
display: none;
}

.giftcard {
-webkit-animation: slideup 0.8s ease-in-out;
animation: slideup 0.8s ease-in-out
}

.giftcard__border {
background-color: $colorGiftBorder;
border-radius: 4px;
border: 1px solid darken($colorGiftBorder, 5%);
padding: 1em;
-webkit-animation: container-slide 0.8s ease-in-out;
animation: container-slide 0.8s ease-in-out
}

.giftcard__content {
@include clearfix;
background-color: #fff;
color: $colorGiftText;
border: 1px solid darken($colorGiftBorder, 5%);
border-radius: 3px;
-webkit-animation: cardslide 0.8s ease-in-out;
animation: cardslide 0.8s ease-in-out;
}

.giftcard__header {
@include clearfix;
border-bottom: 1px solid $colorBorder;
padding: $gutter / 2;
}

.giftcard__title {
float: left;
margin-bottom: 0;
}

.giftcard__tag {
display: block;
float: right;
background-color: lighten($colorGiftText, 10%);
border: 1px solid transparent;
color: #fff;
padding: $gutter / 3;
border-radius: 4px;
font-size: 0.75em;
text-transform: uppercase;
letter-spacing: .05em;
line-height: 1;
}

.giftcard__tag–active {
background: transparent;
color: $colorGiftText;
border: 1px solid lighten($colorGiftText, 20%);
}

.giftcard__wrap {
position: relative;
margin: ($gutter / 2) ($gutter / 2) $gutter;

img {
position: relative;
display: block;
border-radius: 10px;
z-index: 2;
}

&:before,
&:after {
content: “”;
position: absolute;
width: 47px;
height: 47px;
z-index: 3;
}

&:before {
background: url(‘//cdn.shopify.com/s/assets/gift-card/corner-top-left-2ba3edcd9e97ba146cd01a8161365c5e.svg’) 0 0 no-repeat;
top: -1px;
left: -1px;
}

&:after {
background: url(‘//cdn.shopify.com/s/assets/gift-card/corner-bottom-right-1fb9bf49ff9564325e6b7c0fb0a7ff45.svg’) 0 0 no-repeat;
bottom: -1px;
right: -1px;
}
}
.giftcard__code {
position: absolute;
bottom: $gutter;
text-align: center;
width: 100%;
z-index: 50;
}

.giftcard__code–medium {
font-size: .875em;
}

.giftcard__code–small {
font-size: .75em;
}

.giftcard__code__inner {
display: inline-block;
vertical-align: baseline;
background-color: #fff;
padding: .5em;
border-radius: 4px;
max-width: 450px;
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
box-shadow: 0 0 0 1px rgba(0,0,0,0.1);

.giftcard__code–small & {
overflow: auto;
}
}

.giftcard__code__text {
font-size: 1.875em;
text-transform: uppercase;
border-radius: 2px;
border: 1px dashed $colorBorder;
padding: .4em .5em;
display: inline-block;
vertical-align: baseline;
color: $colorGiftText;
line-height: 1;

.disabled & {
color: #999;
text-decoration: line-through;
}
}

.giftcard__amount {
position: absolute;
top: 0;
right: 0;
color: #fff;
font-size: 2.75em;
line-height: 1.2;
padding: $gutter / 2;
z-index: 50;

strong {
display: block;

}
}

.giftcard__amount–medium {
font-size: 2em;
}

.tooltip {
display: block;
position: absolute;
top: -50%;
right: 50%;
margin-top: 16px;
z-index: 3;
color: #fff;
text-align: center;
white-space: nowrap;
-webkit-animation: popup 0.5s ease-in-out both 0.7s;
animation: popup 0.5s ease-in-out both 0.7s;

&:before {
content: “”;
display: block;
position: absolute;
left: 100%;
bottom: 0;
width: 0;
height: 0;
margin-left: -5px;
margin-bottom: -5px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 5px solid #333;
border-top: 5px solid rgba(51,51,51,0.9);
}
}

.tooltip__label {
display: block;
position: relative;
right: -50%;
border: none;
border-radius: 4px;
background: #333;
background: rgba(51,51,51,0.9);
min-height: 14px;
font-size: 12px;
text-decoration: none;
line-height: 16px;
text-shadow: none;
padding: .5em .75em;
margin-left: .25em;

small {
text-transform: uppercase;
letter-spacing: .1em;
color: #b3b3b3;
font-size: .875em;
}
}

.giftcard__instructions {
text-align: center;
margin: 0 ($gutter / 2) $gutter;
}

.giftcard__actions {
position: relative;
border-top: 1px solid $colorBorder;
padding: $gutter ($gutter / 2);
text-align: center;
overflow: hidden;
}

.action-link {
position: absolute;
left: $gutter / 2;
top: 50%;
font-size: 0.875em;
display: block;
text-transform: uppercase;
letter-spacing: .2em;
color: lighten($colorGiftText, 10%);
margin-top: -10px;

&:hover,
&:focus {
color: #E7D2CC;
}
}

.action-link__print {
display: inline-block;
vertical-align: baseline;
width: 17px;
height: 17px;
vertical-align: middle;
margin-right: 5px;
opacity: 0.25;
background: {
image: url(‘//cdn.shopify.com/s/assets/gift-card/icon-print-164daa1ae32d10d1f9b83ac21b6f2c70.png’);
repeat: no-repeat;
position: 0 0;
}

.svg & {
background-image: url(‘//cdn.shopify.com/s/assets/gift-card/icon-print-6a10b2fb86d223b8c783c9696eaf4c31.svg’);
}

.action-link:hover & {
opacity: 0.4;
}
}

.giftcard__footer {
text-align: center;
padding: ($gutter * 2) 0;
-webkit-animation: fadein 0.5s ease-in-out both 0.4s;
animation: fadein 0.5s ease-in-out both 0.4s
}

#QrCode {
img {
padding: $gutter;
border: 1px solid $colorBorder;
border-radius: 4px;
margin: 0 auto $gutter;
}
}

/============================================================================
#Media Queries
==============================================================================/

/================ Medium-down width ================/
@media screen and (max-width: 580px) {
.giftcard {
font-size: 12px;
}

.giftcard-header {
padding: $gutter 0;
}

.header-logo {
font-size: 2em;
}

.giftcard__border {
padding: $gutter / 2;
}

.giftcard__actions {
padding: $gutter / 2;
}

.giftcard__actions .btn {
width: 100%;
padding-left: 0;
padding-right: 0;
}

.action-link {
display: none;
}

}

/================ Small width ================/
@media screen and (max-width: 400px) {
.giftcard__amount strong {
text-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}

.giftcard__wrap:before,
.giftcard__wrap:after {
display: none;
}

.giftcard__code {
font-size: .75em;
}

.giftcard__code–medium {
font-size: .65em;
}

.giftcard__code–small {
font-size: .55em;
}
}

/================ Small height ================/
@media screen and (max-height: 800px) {
.header-logo img {
max-height: 90px;
}
}

/============================================================================
#Print Styles
==============================================================================/
@media print {
@Page {
margin: 0.5cm;
}

p, h2, h3 {
orphans: 3;
widows: 3;
}

h2, h3 {
page-break-after: avoid;
}

html, body {
background-color: #fff;
}

.giftcard-header {
padding: 10px 0;
}

.giftcard__content,
.giftcard__border {
border: 0 none;
}

.giftcard__actions,
.giftcard__wrap:before,
.giftcard__wrap:after,
.tooltip,
.add-to-apple-wallet {
display: none;
}

.giftcard__title {
float: none;
text-align: center;
}

.giftcard__code__text {
color: #555;
}

.shop-url {
display: block;
}

.logo {
color: #58686F;
}
}

/============================================================================
#Keyframe Animations
==============================================================================/
[email removed] slideup {
0% {
opacity: 0;
-webkit-transform: translateY(2000px) rotate(10deg)
}

60% {
opacity: 1;
-webkit-transform: translateY(-30px)
}

80% {
-webkit-transform: translateY(10px)
}

100% {
-webkit-transform: translateY(0) rotate(0deg)
}
}

[email removed] slideup {
0% {
opacity: 0;
-webkit-transform: translateY(2000px) rotate(10deg)
}

60% {
opacity: 1;
-webkit-transform: translateY(-30px)
}

80% {
-webkit-transform: translateY(10px)
}

100% {
-webkit-transform: translateY(0) rotate(0deg)
}
}

@keyframes slideup {
0% {
opacity: 0;
-webkit-transform: translateY(2000px) rotate(10deg)
}

60% {
opacity: 1;
-webkit-transform: translateY(-30px)
}

80% {
-webkit-transform: translateY(10px)
}

100% {
-webkit-transform: translateY(0) rotate(0deg)
}
}

[email removed] popup {
0% {
opacity: 0;
-webkit-transform: translateY(30px)
}

60% {
opacity: 1;
-webkit-transform: translateY(-10px)
}

80% {
-webkit-transform: translateY(2px)
}

100% {
-webkit-transform: translateY(0)
}
}

[email removed] popup {
0% {
opacity: 0;
-webkit-transform: translateY(30px)
}

60% {
opacity: 1;
-webkit-transform: translateY(-10px)
}

80% {
-webkit-transform: translateY(2px)
}

100% {
-webkit-transform: translateY(0)
}
}

@keyframes popup {
0% {
opacity: 0;
-webkit-transform: translateY(30px)
}

60% {
opacity: 1;
-webkit-transform: translateY(-10px)
}

80% {
-webkit-transform: translateY(2px)
}

100% {
-webkit-transform: translateY(0)
}
}

[email removed] container-slide {
0% {
opacity: 0;
-webkit-transform: rotate(0deg)
}

100% {
-webkit-transform: rotate(0deg)
}
}

[email removed] container-slide {
0% {
opacity: 0;
-webkit-transform: rotate(0deg)
}

100% {
-webkit-transform: rotate(0deg)
}
}

@keyframes container-slide {
0% {
opacity: 0;
-webkit-transform: rotate(0deg)
}

100% {
-webkit-transform: rotate(0deg)
}
}

[email removed] fadein {
0% {
opacity: 0
}

100% {
opacity: 100
}
}

[email removed] fadein {
0% {
opacity: 0
}

100% {
opacity: 100
}
}

@keyframes fadein {
0% {
opacity: 0
}

100% {
opacity: 100
}
}