0

SO ive added some paypal buttons to my website, i put them into a div so i could have them display next to each other. All working fine on dekstop but on mobile the paypal buttons arent shrinking and are causing me issues??

The custom css im using is

/* payment section */

.one {
  position: relative;
  width: 50%;
  float: left;
  border: 2px solid black;
}

.two {
  position: relative;
  width: 50%;
  float: left;
  border: 2px solid black;
}
<div class="container">
  <div class="one">

    <img class="aligncenter wp-image-1392 size-full" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/basic-package.png" alt="" width="400" height="100" />
    <ul>
      <li>Complete Listing on our site including</li>
      <li>Price</li>
      <li>Short description Line</li>
      <li>Description</li>
      <li>4 Images</li>
      <li>Social media promotions each month</li>
      <li>Direct link to your website</li>
      <li>Coupon codes if you want them</li>
    </ul>
    <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"><input name="hosted_button_id" type="hidden" value="P4Y97FDDKGZPS" />
      <table>
        <tbody>
          <tr>
            <td style="text-align: center;"><input name="on0" type="hidden" value="Basic Subscription Length" />Basic Subscription Length</td>
          </tr>
          <tr>
            <td style="text-align: center;">
              <select name="os0">
                <option value="Basic Monthly">Basic Monthly : $7.00 AUD - monthly</option>
                <option value="Basic 12 Month">Basic 12 Month : $70.00 AUD - yearly</option>
              </select>
            </td>
          </tr>
          <tr>
            <td style="text-align: center;"><input name="on1" type="hidden" value="Your Subscription Box Name" />Your Subscription Box Name</td>
          </tr>
          <tr>
            <td style="text-align: center;"><input maxlength="200" name="os1" type="text" /></td>
          </tr>
        </tbody>
      </table>
      <p style="text-align: center;"><input name="currency_code" type="hidden" value="AUD" />
        <input alt="PayPal – The safer, easier way to pay online!" name="submit" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/subscribe3.jpg" type="image" />
        <img src="https://www.paypalobjects.com/en_AU/i/scr/pixel.gif" alt="" width="1" height="1" border="0" /></p>

    </form>
  </div>
  <div class="two">

    <img class="aligncenter wp-image-1398 size-full" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/premium-package.png" alt="" width="400" height="100" />
    <ul>
      <li>Featured on the front page slider</li>
      <li>Top of the search and category pages</li>
      <li>Icon added to the image saying "popular"</li>
      <li>Your Companys social media links</li>
      <li>As many custom images as you like</li>
      <li>A custom description of your choice</li>
      <li>Social media promotions each week</li>
      <li>Email campaigns to our subscribers</li>
    </ul>
    <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"><input name="hosted_button_id" type="hidden" value="GGE7UFLSPM5S4" />
      <table>
        <tbody>
          <tr>
            <td style="text-align: center;"><input name="on0" type="hidden" value="Premium Subscription Length" />Premium Subscription Length</td>
          </tr>
          <tr>
            <td>
              <select name="os0">
                <option value="Premium Monthly">Premium Monthly : $15.00 AUD - monthly</option>
                <option value="Premium 12 Month">Premium 12 Month : $150.00 AUD - yearly</option>
              </select>
            </td>
          </tr>
          <tr>
            <td style="text-align: center;"><input name="on1" type="hidden" value="Your Subscription Box Name" />Your Subscription Box Name</td>
          </tr>
          <tr>
            <td style="text-align: center;"><input maxlength="200" name="os1" type="text" /></td>
          </tr>
        </tbody>
      </table>
      <p style="text-align: center;"><input name="currency_code" type="hidden" value="AUD" />
        <input alt="PayPal – The safer, easier way to pay online!" name="submit" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/subscribe3.jpg" type="image" />
        <img src="https://www.paypalobjects.com/en_AU/i/scr/pixel.gif" alt="" width="1" height="1" border="0" /></p>

    </form>
  </div>
</div>

<hr /> &nbsp;
<div class="container">
  <div class="one">
    <h3 style="text-align: center;"><img class="aligncenter wp-image-1392 size-full" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/basic-package.png" alt="" width="400" height="100" /> Basic Listing Page View</h3>

    <hr />

    <a href="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/basic-page-view.png"><img class="aligncenter wp-image-1453" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/basic-page-view-252x300.png" alt="" width="390" height="464" /></a>

  </div>
  <div class="two">
    <h3 style="text-align: center;"><img class="aligncenter wp-image-1398 size-full" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/premium-package.png" alt="" width="400" height="100" /> Premium Listing Page View</h3>

    <hr />

    <h3 style="text-align: center;">
      <a href="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/premium-page-view.png"><img class="aligncenter wp-image-1452" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/premium-page-view-187x300.png" alt="" width="390" height="626" /></a>
      Premium Listing Front Page View</h3>

    <hr />

    <h3 style="text-align: center;">
      <a href="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/05/Featured-Box.png"><img class="aligncenter wp-image-730" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/05/Featured-Box-1024x456.png" alt="" width="390" height="174" /></a>
    </h3>
  </div>
</div>

Any ideas what i can try please? im so confused why the other elements shrink fine, but the paypal does not??

Thanks Guys

Toan Lu
  • 1,169
  • 2
  • 13
  • 27
user7663911
  • 1
  • 3
  • Possible duplicate of [How to force table cell content to wrap?](https://stackoverflow.com/questions/6666532/how-to-force-table-cell-td-content-to-wrap) – Toan Lu Jul 21 '18 at 08:42

1 Answers1

1

Not entirely how you want your elements to be displayed on smaller screens such as phones. you can add class="paypal" to your input field containing the image and add the following media queries to your CSS to help scale it for smaller devices

input.paypal {
    width: auto;
}

@media (max-width: 768px) {
    input.paypal {
        width: 100%;
    }
}

See example here:

    /* payment section */

    .one {
        position: relative;
        width: 50%;
        float: left;
        border: 2px solid black;
    }

    .two {
        position: relative;
        width: 50%;
        float: left;
        border: 2px solid black;
    }

    input.paypal {
        width: auto;
    }

    @media (max-width: 768px) {
        input.paypal {
            width: 100%;
        }
    }

    select {
        box-sizing: border-box;
        width: 100%;
    }
    <div class="container">
        <div class="one">
            <img class="aligncenter wp-image-1392 size-full" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/basic-package.png" alt="" width="400" height="100" />
            <ul>
                <li>Complete Listing on our site including</li>
                <li>Price</li>
                <li>Short description Line</li>
                <li>Description</li>
                <li>4 Images</li>
                <li>Social media promotions each month</li>
                <li>Direct link to your website</li>
                <li>Coupon codes if you want them</li>
            </ul>
            <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
                <input name="hosted_button_id" type="hidden" value="P4Y97FDDKGZPS" />
                <table>
                    <tbody>
                        <tr>
                            <td style="text-align: center;">
                                <input name="on0" type="hidden" value="Basic Subscription Length" />Basic Subscription Length</td>
                        </tr>
                        <tr>
                            <td style="text-align: center;">
                                <select name="os0">
                                    <option value="Basic Monthly">Basic Monthly : $7.00 AUD - monthly</option>
                                    <option value="Basic 12 Month">Basic 12 Month : $70.00 AUD - yearly</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center;">
                                <input name="on1" type="hidden" value="Your Subscription Box Name" />Your Subscription Box Name</td>
                        </tr>
                        <tr>
                            <td style="text-align: center;">
                                <input maxlength="200" name="os1" type="text" />
                            </td>
                        </tr>
                    </tbody>
                </table>
                <p style="text-align: center;">
                    <input name="currency_code" type="hidden" value="AUD" />
                    <input class="paypal " alt="PayPal – The safer, easier way to pay online!" name="submit" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/subscribe3.jpg" type="image" />
                    <img src="https://www.paypalobjects.com/en_AU/i/scr/pixel.gif" alt="" width="1" height="1" border="0" /></p>
            </form>
        </div>
        <div class="two">
            <img class="aligncenter wp-image-1398 size-full" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/premium-package.png" alt="" width="400" height="100" />
            <ul>
                <li>Featured on the front page slider</li>
                <li>Top of the search and category pages</li>
                <li>Icon added to the image saying "popular"</li>
                <li>Your Companys social media links</li>
                <li>As many custom images as you like</li>
                <li>A custom description of your choice</li>
                <li>Social media promotions each week</li>
                <li>Email campaigns to our subscribers</li>
            </ul>
            <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
                <input name="hosted_button_id" type="hidden" value="GGE7UFLSPM5S4" />
                <table>
                    <tbody>
                        <tr>
                            <td style="text-align: center;">
                                <input name="on0" type="hidden" value="Premium Subscription Length" />Premium Subscription Length</td>
                        </tr>
                        <tr>
                            <td>
                                <select name="os0">
                                    <option value="Premium Monthly">Premium Monthly : $15.00 AUD - monthly</option>
                                    <option value="Premium 12 Month">Premium 12 Month : $150.00 AUD - yearly</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center;">
                                <input name="on1" type="hidden" value="Your Subscription Box Name" />Your Subscription Box Name</td>
                        </tr>
                        <tr>
                            <td style="text-align: center;">
                                <input maxlength="200" name="os1" type="text" />
                            </td>
                        </tr>
                    </tbody>
                </table>
                <p style="text-align: center;">
                    <input name="currency_code" type="hidden" value="AUD" />
                    <input class="paypal" alt="PayPal – The safer, easier way to pay online!" name="submit" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/subscribe3.jpg" type="image" />
                    <img src="https://www.paypalobjects.com/en_AU/i/scr/pixel.gif" alt="" width="1" height="1" border="0" /></p>
            </form>
        </div>
    </div>
    <hr /> &nbsp;
    <div class="container">
        <div class="one">
            <h3 style="text-align: center;"><img class="aligncenter wp-image-1392 size-full" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/basic-package.png" alt="" width="400" height="100" />
Basic Listing Page View</h3>
            <hr />
            <a href="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/basic-page-view.png"><img class="aligncenter wp-image-1453" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/basic-page-view-252x300.png" alt="" width="390" height="464" /></a>
        </div>
        <div class="two">
            <h3 style="text-align: center;"><img class="aligncenter wp-image-1398 size-full" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/premium-package.png" alt="" width="400" height="100" />
Premium Listing Page View</h3>
            <hr />
            <h3 style="text-align: center;"><a href="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/premium-page-view.png"><img class="aligncenter wp-image-1452" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/premium-page-view-187x300.png" alt="" width="390" height="626" /></a>
Premium Listing Front Page View</h3>
            <hr />
            <h3 style="text-align: center;"><a href="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/05/Featured-Box.png"><img class="aligncenter wp-image-730" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/05/Featured-Box-1024x456.png" alt="" width="390" height="174" /></a></h3>
        </div>
    </div>
martinsoender
  • 213
  • 1
  • 9
  • sorry i totally forgot to add a link to show you guys https://www.subscriptionboxaustralia.com/for-sub-box-owners/ thanks Martin, ill try that out and see how it goes! legend. – user7663911 Jul 22 '18 at 00:27
  • Well that half worked! It fixed the button, but the text above the button (the drop down and custom text field) are still too big. Hmmm can we apply the paypal class to these sections aswell? thanks so much buddy – user7663911 Jul 22 '18 at 00:35
  • Unfortunately, the `paypal` class won't work. I've added the solution above. Look at the few lines I added for `select`. That should do the job for you :) – martinsoender Jul 22 '18 at 06:54
  • thanks for your time martin, but unfortunately it hasnt worked. I guess its just not meant to be! i may just have to have one box under the other instead of side by side, so it works on mobile – user7663911 Jul 22 '18 at 11:21