How to position my custom code differently on the page

Developer help
21

Keep the CSS I posted above and this CSS below as a code injection in the footer. Then use this as an HTML card:

<div class="clearfix">
  <span class="float-right-sm"></span><br>
  <span class="float-right-lg"><form method="POST"  action="https://btcpay905361.lndyn.com/api/v1/invoices" class="btcpay-form btcpay-form--block">
  <input type="hidden" name="storeId" value="E5cxHG1gSP3TiBBeB1aGsRyp8MhVj885FBhra3WEzELT" />
  <div class="btcpay-custom-container">
    <input id="btcpay-input-price" name="price" type="text" min="0" max="none" step="any" value="10" style="width: 209px;" oninput="event.preventDefault();isNaN(event.target.value) || event.target.value <= 0 ? document.querySelector('#btcpay-input-price').value = 10 : event.target.value" onchange="document.querySelector('#btcpay-input-range').value = document.querySelector('#btcpay-input-price').value" />
    <select name="currency">
      <option value="USD" selected>USD</option>
      <option value="GBP">GBP</option>
      <option value="EUR">EUR</option>
      <option value="BTC">BTC</option>
    </select>
    <input class="btcpay-input-range" id="btcpay-input-range" value="10" type="range" min="10" max="500" step="10" style="width:209px;margin-bottom:15px;" oninput="document.querySelector('#btcpay-input-price').value = document.querySelector('#btcpay-input-range').value" />
  </div>
<button type="submit" class="submit" name="submit" style="min-width:209px; min-height:57px; border-radius: 4px;border-style: none;background-color: #0f3b21;" alt="Pay with BtcPay, Self-Hosted Bitcoin Payment Processor"><span style="color:#fff">Donate Bitcoin to Eoin with</span>
<img src="https://btcpay905361.lndyn.com/img/logo.svg" style="height:57px;display:inline-block;padding: 5% 0 5% 5px;vertical-align: middle;">
</button></form></span><br>
</div>

Injections:

<style type="text/css"> input[type=range].btcpay-input-range { -webkit-appearance:none; width:100%; background: transparent; } input[type=range].btcpay-input-range:focus { outline:0; } input[type=range].btcpay-input-range::-webkit-slider-runnable-track { width:100%; height:3.1px; cursor:pointer; box-shadow:0 0 1.7px #020,0 0 0 #003c00; background:#f3f3f3; border-radius:1px; border:0; } input[type=range].btcpay-input-range::-webkit-slider-thumb { box-shadow:none; border:2.5px solid #cedc21; height:22px; width:22px; border-radius:50%; background:#0f3723; cursor:pointer; -webkit-appearance:none; margin-top:-9.45px } input[type=range].btcpay-input-range:focus::-webkit-slider-runnable-track { background:#fff; } input[type=range].btcpay-input-range::-moz-range-track { width:100%; height:3.1px; cursor:pointer; box-shadow:0 0 1.7px #020,0 0 0 #003c00; background:#f3f3f3; border-radius:1px; border:0; } input[type=range].btcpay-input-range::-moz-range-thumb { box-shadow:none; border:2.5px solid #cedc21; height:22px; width:22px; border-radius:50%; background:#0f3723; cursor:pointer; } input[type=range].btcpay-input-range::-ms-track { width:100%; height:3.1px; cursor:pointer; background:0 0; border-color:transparent; color:transparent; } input[type=range].btcpay-input-range::-ms-fill-lower { background:#e6e6e6; border:0; border-radius:2px; box-shadow:0 0 1.7px #020,0 0 0 #003c00; } input[type=range].btcpay-input-range::-ms-fill-upper { background:#f3f3f3; border:0; border-radius:2px; box-shadow:0 0 1.7px #020,0 0 0 #003c00; } input[type=range].btcpay-input-range::-ms-thumb { box-shadow:none; border:2.5px solid #cedc21; height:22px; width:22px; border-radius:50%; background:#0f3723; cursor:pointer; height:3.1px; } input[type=range].btcpay-input-range:focus::-ms-fill-lower { background:#f3f3f3; } input[type=range].btcpay-input-range:focus::-ms-fill-upper { background:#fff; } </style>

.float-right-sm {
background-color: transparent;
}
.float-right-lg {
background-color: transparent;
}
@media (max-width: 768px) {
.float-right-sm {
float: right;
}}
@media (min-width: 769px) {
.float-right-lg {
float: right;
}}
.clearfix::after {
display: block;
clear: both;
content: "";
}

That should do it.

22

That seems to be very good.

Just one issue: the slider is positioned to the right of where it should be, check out the attached image.

Screenshot 2021-04-16 18.19.39
Screenshot 2021-04-16 18.19.39753×630 20.7 KB

Is there any way of tweaking the code to position the slider directly above the ‘Donate Bitcoin…’ button?

23

I’ll check and get back to you tomorrow.

24

I have checked this and no matter what I do (even tried to wrap it around a separate DIV making it sticky adding on top and right as a code injection without result), it won’t work.

I’m gonna re-write the whole thing when I get time. Meanwhile, if time is of the essence, you might wanna get some additional help.

25

That sounds like a plan Bear.

Any help you can offer with this project is much appreciated.

:pray: