Buy Bottom margin

[Nickmegax]

Hello, I have a problem regarding the spacing of a button.

I would like to make the button closer to the video, I already tried it with my limited knowledge in css / html and nothing.

Could someone help me to close the distance?

I thank you all

My Button Code:

<center><div id='product-component-1603806670242'></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: 'pocao-de-mana.myshopify.com',
      storefrontAccessToken: '21e476afbc9988808c95921f7d57e355',
    });
    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: '5739061706915',
        node: document.getElementById('product-component-1603806670242'),
        moneyFormat: 'R%24%20%7B%7Bamount_with_comma_separator%7D%7D',
        options: {
  "product": {
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px"
        }
      },
      "button": {
        "font-family": "Montserrat, sans-serif",
        "font-weight": "bold",
        "font-size": "18px",
        "padding-top": "17px",
        "padding-bottom": "17px",
        ":hover": {
          "background-color": "#0071cd"
        },
        "background-color": "#007ee4",
        ":focus": {
          "background-color": "#0071cd"
        },
        "border-radius": "40px",
        "padding-left": "60px",
        "padding-right": "60px"
      },
      "quantityInput": {
        "font-size": "18px",
        "padding-top": "17px",
        "padding-bottom": "17px"
      }
    },
    "contents": {
      "img": false,
      "title": false,
      "price": false
    },
    "text": {
      "button": "Comprar Agora!"
    },
    "googleFonts": [
      "Montserrat"
    ]
  },
  "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": "Montserrat, sans-serif",
        "font-weight": "bold",
        "font-size": "18px",
        "padding-top": "17px",
        "padding-bottom": "17px",
        ":hover": {
          "background-color": "#0071cd"
        },
        "background-color": "#007ee4",
        ":focus": {
          "background-color": "#0071cd"
        },
        "border-radius": "40px",
        "padding-left": "60px",
        "padding-right": "60px"
      },
      "quantityInput": {
        "font-size": "18px",
        "padding-top": "17px",
        "padding-bottom": "17px"
      }
    },
    "googleFonts": [
      "Montserrat"
    ],
    "text": {
      "button": "Add to cart"
    }
  },
  "cart": {
    "styles": {
      "button": {
        "font-family": "Montserrat, sans-serif",
        "font-weight": "bold",
        "font-size": "18px",
        "padding-top": "17px",
        "padding-bottom": "17px",
        ":hover": {
          "background-color": "#0071cd"
        },
        "background-color": "#007ee4",
        ":focus": {
          "background-color": "#0071cd"
        },
        "border-radius": "40px"
      }
    },
    "text": {
      "total": "Subtotal",
      "button": "Checkout"
    },
    "popup": false,
    "googleFonts": [
      "Montserrat"
    ]
  },
  "toggle": {
    "styles": {
      "toggle": {
        "font-family": "Montserrat, sans-serif",
        "font-weight": "bold",
        "background-color": "#007ee4",
        ":hover": {
          "background-color": "#0071cd"
        },
        ":focus": {
          "background-color": "#0071cd"
        }
      },
      "count": {
        "font-size": "18px"
      }
    },
    "googleFonts": [
      "Montserrat"
    ]
  }
},
      });
    });
  }
})();
/]]>/
</script></center>

[drakedev]

Hi, in order to help I need to see the page. Can you share the URL?

[diego_ezfy]

Hello,

Thank you for your question.

Please share:
- your store URL;
- page URL with the issue you mention;
- storefront password (if your store has one).

I'll help you to the best of my ability.

Kind regards,
Diego

[Nickmegax]

Url store:www.mana-shop.com     

Url: https://gdo73lwufbzt0k35-48515154083.shopifypreview.com/products_preview?preview_key=c781c54f981e7e3...

No password

[Nickmegax]

Sorry for last message

Ulr: www.mana-shop.com

Page Url: mana-shop.com/products/redragon-hd-webcam-autofocus-built-in-microphone-1920-x-1080p-30fps-web-cam-camera-usb-stream-camera-for-desktop-laptops-game-pc

No password

[diego_ezfy · Accepted solution]

Do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

.shopify-buy-frame{
    display: block;
    position: relative;
    
    margin-top: -30px;
    margin-bottom: -20px;
}

@media (max-width: 767px){

.shopify-buy-frame{

    margin-top: -20px;
    margin-bottom: -20px;
}
    
}

You can change the values as you wish. They can be of any value, either positive or negative, like: -30px, 30px, 100px, -100px, etc 

Respectively:

-30px = top spacing for desktop
-20px = bottom spacing for desktop

-20px = top spacing for mobile
-20px = bottom spacing for mobile

Please let me know whether it works.

Kind regards,
Diego