Mobile view - table visible only partialy

...support???

Hello Boris,
I apologize for the delay.

Add this code to Additional CSS (Themler -> Home -> Settings):

#post-332 .bd-postcontent-3 .bd-tagstyles  .entry-content .bd-contentlayout-offset {overflow-x:scroll!important;}
table:not([class]), .bd-tagstyles:not(.bd-custom-table) table, .bd-table {width:100%!important;}

Gina
Themler Support

Thank you for your answer but it doesn't work. I check on mobile (Android).

Last edited 27 February 2019 by boris.krajnc

The problem was that the code I suggested first time added scroll bar to the bottom of the table (not to the bottom of the browser window regardless of where in the table you are currently).
You can try setting min-width to entire page to force scroll barin the bottom of the browser by adding this code:

body.page-id-332 {
min-width:550px!important;}

From the previous code I shared, you can keep only this part:

table:not([class]), .bd-tagstyles:not(.bd-custom-table) table, .bd-table {width:100%!important;}

Gina
Themler Support

Hi, thank you for your answer. It actualy works, but on mobile phone header becom messy. How to fix that?

I also have question for other sites with same tables. I can see, that you put page-id-332. From where did you read this ID. If I understand correctly I must add line for every page?

Regards

This is the code to fix the header:

.page-id-332 {
    min-width:550px!important;}
@media (max-width: 767px) { .page-id-332 #section3 {
    max-width:450px !important;
    overflow:hidden !important;
    }}

As for page-id, I got it from the source code I can see in a browser using developer tools. I used it to narrow down the code effect to this page only. If you remove this ID, the code will be applied to all pages.

Gina
Themler Support

We are closer ;-)

I can see table but when i move to the right I can see part of missing header. Please see attached screenshot.

Customer would be happier if viewers can move only table.

The problem is that if I make only the table move, the scrollbar will be visible only at the bottom of the table, you will need to scroll down and move it there every time.

To fix the header, add this code as well:

header {
background-color:black;
}

Gina
Themler Support