Payment Module selection width

[bellini13]

Prestashop team

 

Before I submit a change to github, I'd like some feedback on the default-bootstrap themes design for payment modules.

 

I'm wondering why you have chosen to limit the width of the payment selection to 50% (see attached image). 

 

While all the elements above the payment method section 100% width (cart summary, address, delivery methods), only the payment selections are 50%.  Was it designed this way intentionally for some reason?

 

Did you leave the other 50% empty (on the right of the arrow) for any particular reason?

 

Based on the themes global.css this will only apply to checque, bankwire and 'cash' modules.  So any other payment module installed will be 100% width and look like the attached image.

 

 

[bellini13]

I should also add that the latest Paypal USA and Paypal Europe modules are also 100% width, which seems to conflict with this 50% design.

[benjamin utterback]

Hi MIke,

 

  Yes this design does end up with some issues. We can do a couple things, we can make all payment modules 50 percent, and set that in two columns. Or we could transform everything in 100% 

 

We are interested in seeing what you think on Github.

 

Thanks!

[bellini13]

Hey Ben, thanks for reviewing.

 

I had installed both Paypal modules and authorize.net, while check, bankwire and cod were also installed and it certainly looks funky (see image), and these are all Prestashop designed modules compatible with 1.6

 

To me it is just an oversight, and my suggestion would be to update the default-bootstrap themes global.css to remove the 50% width, which is a pretty simply change by adding the following to the bottom of global.css

#HOOK_PAYMENT .col-md-6 {
    width: 100%;
}

 

This way any payment module installed (either Prestashop or third party) will at least behave consistently.

 

I just wanted some feedback before making this change so I don't waste my time.

 

 

[Maghrabi]

hi i think many more people like me have this problem. What is the solution for this. Thank you for your help

[bellini13]

I posted the solution above...

 

To me it is just an oversight, and my suggestion would be to update the default-bootstrap themes global.css to remove the 50% width, which is a pretty simply change by adding the following to the bottom of global.css

 

#HOOK_PAYMENT .col-md-6 {
width: 100%;
}