How to remove white space above Buy Button in html/css?

Highlighted
New Member
2 0 0

How do I remove the white space above the button (it's highlighted blue so you can see that it's part of the button)? I've played around a ton with the code I was told to copy/paste, but nothing touched the space. I've also attached the given code.

Thanks!

Screen Shot 2020-07-29 at 12.27.38 AM.png

 

 

 

 

 

 

        <div id='product-component-xxxxxxxxx'></div>
            <script type="text/javascript">
            /*<![CDATA[*/
            (function () {
              var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
              if (window.ShopifyBuy) {
                if (window.ShopifyBuy.UI) {
                  ShopifyBuyInit();
                } else {
                  loadScript();
                }
              } else {
                loadScript();
              }
              function loadScript() {
                var script = document.createElement('script');
                script.async = true;
                script.src=scriptURL;
                (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
                script.onload = ShopifyBuyInit;
              }
              function ShopifyBuyInit() {
                var client = ShopifyBuy.buildClient({
                  domain: 'beanie-ball.myshopify.com',
                  storefrontAccessToken: 'd1c1862d85820924ad5fe5b5aa851010',
                });
                ShopifyBuy.UI.onReady(client).then(function (ui) {
                  ui.createComponent('product', {
                    id: '5502646976680',
                    node: document.getElementById('product-component-1595910746097'),
                    moneyFormat: '%24%7B%7Bamount%7D%7D',
                    options: {
              "product": {
                "styles": {
                  "product": {
                    "@media (min-width: 601px)": {
                      "max-width": "calc(25% - 20px)",
                      "margin-left": "20px",
                      "margin-bottom": "50px"
                    }
                  },
                  "button": {
                    "font-family": "Raleway, sans-serif",
                    "font-size": "13px",
                    "padding-top": "10px",
                    "padding-bottom": "10px",
                    ":hover": {
                      "background-color": "#cf2f1f"
                    },
                    "background-color": "#e63422",
                    ":focus": {
                      "background-color": "#cf2f1f"
                    },
                    "border-radius": "18px",
                    "padding-left": "40px",
                    "padding-right": "40px"
                  },
                  "quantityInput": {
                    "font-size": "13px",
                    "padding-top": "14.5px",
                    "padding-bottom": "14.5px"
                  }
                },
                "buttonDestination": "checkout",
                "contents": {
                  "img": false,
                  "title": false,
                  "price": false
                },
                "text": {
                  "button": "Buy now!"
                },
                "googleFonts": [
                  "Raleway"
                ]
              },
              "productSet": {
                "styles": {
                  "products": {
                    "@media (min-width: 601px)": {
                      "margin-left": "-20px"
                    }
                  }
                }
              },
              "modalProduct": {
                "contents": {
                  "img": false,
                  "imgWithCarousel": true,
                  "button": false,
                  "buttonWithQuantity": true
                },
                "styles": {
                  "product": {
                    "@media (min-width: 601px)": {
                      "max-width": "100%",
                      "margin-left": "0px",
                      "margin-bottom": "0px"
                    }
                  },
                  "button": {
                    "font-family": "Raleway, sans-serif",
                    "font-size": "13px",
                    "padding-top": "14.5px",
                    "padding-bottom": "14.5px",
                    ":hover": {
                      "background-color": "#cf2f1f"
                    },
                    "background-color": "#e63422",
                    ":focus": {
                      "background-color": "#cf2f1f"
                    },
                    "border-radius": "18px",
                    "padding-left": "63px",
                    "padding-right": "63px"
                  },
                  "quantityInput": {
                    "font-size": "13px",
                    "padding-top": "14.5px",
                    "padding-bottom": "14.5px"
                  }
                },
                "googleFonts": [
                  "Raleway"
                ],
                "text": {
                  "button": "Add to cart"
                }
              },
              "cart": {
                "styles": {
                  "button": {
                    "font-family": "Raleway, sans-serif",
                    "font-size": "13px",
                    "padding-top": "14.5px",
                    "padding-bottom": "14.5px",
                    ":hover": {
                      "background-color": "#cf2f1f"
                    },
                    "background-color": "#e63422",
                    ":focus": {
                      "background-color": "#cf2f1f"
                    },
                    "border-radius": "18px"
                  }
                },
                "text": {
                  "total": "Subtotal",
                  "button": "Checkout"
                },
                "googleFonts": [
                  "Raleway"
                ]
              },
              "toggle": {
                "styles": {
                  "toggle": {
                    "font-family": "Raleway, sans-serif",
                    "background-color": "#e63422",
                    ":hover": {
                      "background-color": "#cf2f1f"
                    },
                    ":focus": {
                      "background-color": "#cf2f1f"
                    }
                  },
                  "count": {
                    "font-size": "13px"
                  }
                },
                "googleFonts": [
                  "Raleway"
                ]
              }
            },
                  });
                });
              }
            })();
            /*]]>*/
            </script>

 

 

0 Likes
Highlighted
Shopify Partner
2224 482 625

Hey @beanieball,

Did you try to remove or reduce padding-top from the following code?

button-spacing.jpg

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
New Member
2 0 0

Yes @ dmwwebartisan

I tried to make that value 0 and it just did this:

Screen Shot 2020-07-30 at 10.53.32 AM.png

 

 

 

 

The size of the white space is exactly the same.

0 Likes
Highlighted
Shopify Partner
2224 482 625

Hey @beanieball,

Is it possible for you to share the URL? so I can check properly.

 

Thanks!

 

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes