【问题标题】:Paypal button inside div is not responsive?div内的Paypal按钮没有响应?
【发布时间】:2018-12-29 10:31:42
【问题描述】:

所以我在我的网站上添加了一些贝宝按钮,我将它们放入一个 div 中,这样我就可以让它们彼此相邻显示。 在 dekstop 上一切正常,但在移动设备上,paypal 按钮并没有缩小并导致我出现问题??

im使用的自定义css是

/* 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>

有什么我可以尝试的想法吗?我很困惑为什么其他元素缩小得很好,但贝宝却没有??

谢谢大家

【问题讨论】:

标签: html css paypal


【解决方案1】:

不完全是您希望元素在较小的屏幕(例如手机)上显示的方式。您可以将 class="paypal" 添加到包含图像的输入字段中,并将以下媒体查询添加到您的 CSS 以帮助将其扩展到更小的设备

input.paypal {
    width: auto;
}

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

参见此处的示例:

    /* 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>

【讨论】:

  • 对不起,我完全忘了添加一个链接给你们看subscriptionboxaustralia.com/for-sub-box-owners谢谢马丁,我试试看,看看效果如何!传说。
  • 那一半成功了!它修复了按钮,但按钮上方的文本(下拉和自定义文本字段)仍然太大。嗯,我们也可以将 paypal 类应用到这些部分吗?非常感谢朋友
  • 不幸的是,paypal 类不起作用。我已经添加了上面的解决方案。看看我为select 添加的几行代码。那应该为您完成工作:)
  • 感谢您的时间,马丁,但不幸的是它没有奏效。我想这不是故意的!我可能只需要将一个盒子放在另一个盒子下面而不是并排,所以它可以在移动设备上使用
猜你喜欢
  • 2023-03-21
  • 1970-01-01
  • 1970-01-01
  • 2019-06-24
  • 2017-12-03
  • 1970-01-01
  • 1970-01-01
  • 2016-08-02
相关资源
最近更新 更多