[Resolved] CubeCart 5 Mobile site Issue

[bondimedical]

In the Card Capture gateway of the mobile site I am finding the boxes are going off the edge of the screen. How do I fix this?

[bsmither]

I think, in /modules/gateway/Card_Capture/skin/form.tpl, you will need to edit the fixed width <input type="text"> tags from size="50" to no size at all, which should then let the browser size them to fit. I think.

Be sure to clear the skin cache.

On the other hand, there may be something else forcing the page to be wider than it should be. I am testing with CubeCart's "Mobile" skin.

At 320px wide, the text entry fields are too wide for the display. At 360, everything is fine.

In the image above, what is the object just barely showing on the right edge?

What size is the store logo showing on this page?

Do you have CubeCart's Debug section enabled? That will force the page width to be far wider than the viewport.

[bondimedical]

I managed to find what is making the page wider. I noticed on the Desktop version the country field is much longer than all the other fields - see first screenshot. I then commented out the country field row in the table and all the boxes fit on the mobile - see second screenshot. So how do I fix that?

[bsmither]

In /modules/gateway/Card_Capture/skin/form.tpl, find:
<select name="country">

Change that to:
<select style="width:98%;" name="country">

 

[bondimedical]

Thank you very much for your help.

I ended up making the width 60% because if it's 98% then it looks too long on the desktop version and takes up the whole screen. 

 

[bondimedical]

I managed to figure out my other problem but don't know how to delete this post?