Checkout display problem on mobile layout

While on the checkout page, the shopping cart table which contains SKU/price/quantity/etc seems to overflow past the page when viewing it on a mobile device. It looks like it has something to do with the table being inside the fieldset...whereas tables by themselves display fine on mobile devices with the auto scroll.

Can you fix? See attachment.

Hi

Please show me Your site so I'll be able to check the code and provide a fix for that.

Hi

Please show me Your site so I'll be able to check the code and provide a fix for that.

Check your private messages for URL/un/pw. This problem also exists in the Bike Store demo.

Hi

I see no message from You. Please try send it to my mail.

Hi

I see no message from You. Please try send it to my mail.

Check again...I think I forgot to click "Add" on your moderator name.

Hi

Ok. I can see the problem. Unfortunately this table needs to take some space and if area on the screen is smaller than table itself than such problem occurs. Please add this to css:

Code: Select all

th {
    padding: 4px 0;
}


This will not solve the problem, because I think there is no solution to that, except hiding some columns, but will make some this table smaller and maybe it will fit than.

I fixed it. It was because of the fieldset that wrapped the table.

I set the following style for the fieldset tag:

Code: Select all

display: table-column;

And I also removed the td/th widths from the table in the default_pricelist.php file.

It's good to go and auto scrolls the table correctly not without overflow beyond the mobile layout size.

Hi

I'm glad You've made it working. Is this change made in VM templates or in core files ?

Hi

I'm glad You've made it working. Is this change made in VM templates or in core files ?

I made the change within the template files