Gift check box in check out centered

Solved
dmelger
Tourist
5 0 4

Does anyone know how to left align the gift check box in check out.  I used this tutorial and for some reason the check box on my screen is centered and not aligned with the text.  I hope someone can help.....

https://shopify.dev/tutorials/customize-theme-add-gift-wrap-option

Screen Shot 2021-06-25 at 7.39.43 PM.png

This code is in a copy of my theme and not live. I tried to change the bold below to left align and it doesn't respond at all.

Link to my page is here: https://www.artisanssantacruz.com/

gift-wrapping.liquid

{% if linklists.gift-wrapping.links.size > 0 and linklists.gift-wrapping.links.first.type == 'product_link' %}

<div id="is-a-gift" style="clear: left; margin: 30px 0" class="clearfix rte">
<p>

<input id="gift-wrapping" type="checkbox" name="attributes[gift-wrapping]" value="yes" {% if cart.attributes.gift-wrapping %} checked="checked"{% endif %} style="float: none" />
<label for="gift-wrapping" style="display:inline; padding-left: 5px; float: none;">

Free Gift Wrapping. Please wrap the products in my order.
</label>
</p>
<p>
<label style="display:block" for="gift-note">Gift message (optional):</label>
<textarea name="attributes[gift-note]" id="gift-note">{{ cart.attributes.gift-note }}</textarea>
</p>
</div>

{% assign id = linklists.gift-wrapping.links.first.object.variants.first.id %}

{% assign gift_wraps_in_cart = 0 %}
{% for item in cart.items %}
{% if item.id == id %}
{% assign gift_wraps_in_cart = item.quantity %}
{% endif %}
{% endfor %}

<style>
#updates_{{ id }} { display: none; }
</style>

<script>

Shopify.Cart = Shopify.Cart || {};

Shopify.Cart.GiftWrap = {};

Shopify.Cart.GiftWrap.set = function() {
var headers = new Headers({ 'Content-Type': 'application/json' });

var request = {
method: 'POST',
headers: headers,
body: JSON.stringify({ updates: { {{ id }}: 1 }, attributes: { 'gift-wrapping': true } })
};
fetch('/cart/update.js', request)
.then(function() {
location.href = '/cart';
});
}

Shopify.Cart.GiftWrap.remove = function() {
var headers = new Headers({ 'Content-Type': 'application/json' });

var request = {
method: 'POST',
headers: headers,
body: JSON.stringify({ updates: { {{ id }}: 0 }, attributes: { 'gift-wrapping': '', 'gift-note': '' } })
};
fetch('/cart/update.js', request)
.then(function() {
location.href = '/cart';
});
}

// If we have nothing but gift-wrap items in the cart.
{% if cart.items.size == 1 and gift_wraps_in_cart > 0 %}
document.addEventListener("DOMContentLoaded", function(){
Shopify.Cart.GiftWrap.remove();
});
// If we have more than one gift-wrap item in the cart.
{% elsif gift_wraps_in_cart > 1 %}
document.addEventListener("DOMContentLoaded", function(){
Shopify.Cart.GiftWrap.set();
});
// If we have a gift-wrap item in the cart but our gift-wrapping cart attribute has not been set.
{% elsif gift_wraps_in_cart > 0 and cart.attributes.gift-wrapping == blank %}
document.addEventListener("DOMContentLoaded", function(){
Shopify.Cart.GiftWrap.set();
});
// If we have no gift-wrap item in the cart but our gift-wrapping cart attribute has been set.
{% elsif gift_wraps_in_cart == 0 and cart.attributes.gift-wrapping != blank %}
document.addEventListener("DOMContentLoaded", function(){
Shopify.Cart.GiftWrap.set();
});
{% endif %}

// When the gift-wrapping checkbox is checked or unchecked.
document.addEventListener("DOMContentLoaded", function(){
document.querySelector('[name="attributes[gift-wrapping]"]').addEventListener("change", function(event) {
if (event.target.checked) {
Shopify.Cart.GiftWrap.set();
} else {
Shopify.Cart.GiftWrap.remove();
}

});

document.querySelector('#gift-note').addEventListener("change", function(evt) {
var note = evt.target.value;
var headers = new Headers({ 'Content-Type': 'application/json' });

var request = {
method: 'POST',
headers: headers,
body: JSON.stringify({ attributes: { 'gift-note': note } })
};

fetch('/cart/update.js', request);
});
});

</script>

{% else %}

<p style="clear: left; margin: 30px 0" class="rte">
You attempted to add a gift-wrapping script to your shopping cart, but it won't work because you don't have
a link list with handle <code>gift-wrapping</code> which, in turn, contains a link
to your gift-wrapping product. Please review the steps outlined
<a href="https://shopify.dev/tutorials/customize-theme-add-gift-wrap-option" target="_blank" rel="noopener noreferrer nofollow">here</a>.
</p>

{% endif %}

 

dmelger
Tourist
5 0 4

I also tried to change the CSS and it didn't work....

.is-a-gift {

    float: left;

    width: 100%;

}

.is-a-gift {

    float: left;

}

.is-a-gift input {

    float: left;

    margin: 6px 14px auto;

    min-height: auto;

}

0 Likes
dmwwebartisan
Shopify Partner
7452 1770 2372

@dmelger 

Please try with the following code.

#is-a-gift{
clear: left;
text-align: left;
width: 100%;
display: block;
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
dmelger
Tourist
5 0 4

@dmwwebartisan unfortunately that doesn't work, but thank you.

 

Screen Shot 2021-06-25 at 8.05.40 PM.png

dmwwebartisan
Shopify Partner
7452 1770 2372

@dmelger 

Where can I get this? I checked the page but didn't get that.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
dmelger
Tourist
5 0 4

It's on a test page. I'll make it live for 15 min so you can access it?

dmwwebartisan
Shopify Partner
7452 1770 2372

This is an accepted solution.

@dmelger 

Please remove the old code and try the following:

input#gift-wrapping {
    width: auto !important;
    height: 27px;
}

 

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
dmelger
Tourist
5 0 4

Screen Shot 2021-06-25 at 8.33.59 PM.png

@dmwwebartisan It worked!!! Thank you so much!  

dmwwebartisan
Shopify Partner
7452 1770 2372

@dmelger 

My pleasure to help you.

If helpful then please Like and Accept Solution 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →