CODEWITHSUNDEEP
cssbuttonpaypalcss-grid
Kevin Grastorf
Kevin Grastorf

Reputation: 21

Paypal Button Centering with CSS Grid

Question

I can center my button on desktop, but having problems on mobile. How should I modify my code?

Background

I had a heck of a time centering paypal buttons on a website I built. It was fine on a computer screen, but on mobile screens it floated right and overflowed out of the viewport. I finally fixed it by changing grid-template-column: 100% to 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>

I am wondering if anyone can explain why this worked but the other way didn't. Or if there is a better solution. I'm trying to gain a better understanding. Thank you.

Upvotes: 2

Views: 287

Answers (1)

Ramy Ragab
Ramy Ragab

Reputation: 129

When given grid-template-columns: 100% you had to change the grid-column to 1 and not 2/3 .. grid-column: 2/3 and chose the second column but the first column has the same size Here is the problem that appears on the mobile that the first and second columns are similar to the same size larger than the screen size of the mobile

Upvotes: 1

Related Questions