ZCA Bootstrap 4 Template [Support Thread]

[swguy]

I think I see @diamond1's point. Here's my shopping cart page on mobile:

[diamond1]

Do you have screen resize? I have the problem with an iphone5 it is necessary to resize the screen to the smallest and you will see it in the demo also saw my print in resize the screen

[barco57]

Ok, I see now. The overflow on the shopping cart table-responsive is being seen by the rest of the page making it wider than it should be as you can see the nav bar at the top is wider than the screen and the back-to-top button is off screen. On Initial screen load of the shopping cart page it was offset and a refresh brought it back to where you would expect it to be. Deleting the table-responsive element from the DOM solved the navbar display and back-to-top button location issues, so it is definitely the overflow of the table-responsive being seen by the rest of the page or at least by the navbar that is causing the issue.

Editing after the response from above: I tested in chrome and firefox with the inspector and tested against a number of devices listed. I don't own an Apple device to physically test on

[diamond1]

Hello, I tried to apply the fix .table-responsive .table {max-width: none;} but I have no change, I put on stylesheet.css and it does not change anything, I think I did not understand or apply the css fix.

[ianhg]

Yes I have a the same on iPhone but I found this :

I found out that by default the .table element has max-width: 100% and safari "respects" this so it set the width to be 100% which means that the .table element isn't overflowing the .table-responsive element hence causing it to not be scrollable. This somehow doesn't affect android phones.
The fix was rather easy:

.table-responsive .table { max-width: none;}


You then get a horizontal scroll on the iPhone