Paypal按钮以CSS网格为中心

Question

问题

我可以将我的按钮放在桌面上，但在移动设备上有问题。我该如何修改我的代码？

背景

我在website建造的{{3}}上有一点时间支持贝宝按钮。它在电脑屏幕上很好，但在移动屏幕上，它会向右浮动并溢出视口。我最后通过将grid-template-column: 100%更改为grid-template-column: 5% 95%来修复它。

CSS

 .paypal {
position: relative;
grid-column: 2/3;
grid-row: 2/3;
margin: 0 auto;
}

.subscription,
#content > div.coach-grid-4 > div.second-p2 > span > form > 
input[type="image"]:nth-child(3) {
grid-column: 2/3;
grid-row: 6/7;
margin: 0 auto;
}

HTML

<div class="second-p2">


 <div class="paypal" id="paypal-button"></div> //Paypal Button

 <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_subscribeCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
 <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">

</div>

我想知道是否有人可以解释为什么这有效，但另一方面没有。或者，如果有更好的解决方案。我试图获得更好的理解。谢谢。

Answer 1

当给定grid-template-columns：100％时，你必须将grid-column更改为1而不是2/3 .. grid-column：2/3并选择第二列，但第一列具有相同的大小 以下是移动设备上出现的问题：第一列和第二列的大小相同，大小与移动设备的屏幕尺寸相同