Mobile view - table visible only partialy

boris.krajnc
17 Posts
boris.krajnc posted this 09 February 2019

What should I do that table (made with HTML) on this web page will be wisible in full. It would be also OK if I can scroll left to right.

https://agencija.experience-slovenia.com/odhodi/

You can try first on PC to see full table and than on Mobile.

What should I do that table (made with HTML) on this web page will be wisible in full. It would be also OK if I can scroll left to right. https://agencija.experience-slovenia.com/odhodi/ You can try first on PC to see full table and than on Mobile.
Vote to pay developers attention to this features or issue.
8 Comments
Order By: Standard | Newest
boris.krajnc
17 Posts
boris.krajnc posted this 12 February 2019

...support???

...support???
Support Team
Support Team posted this 27 February 2019

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

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
boris.krajnc
17 Posts
boris.krajnc posted this 27 February 2019

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

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

Last edited 27 February 2019 by boris.krajnc

Support Team
Support Team posted this 28 February 2019

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

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
boris.krajnc
17 Posts
boris.krajnc posted this 02 March 2019

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

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
Support Team
Support Team posted this 04 March 2019

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

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
boris.krajnc
17 Posts
boris.krajnc posted this 04 March 2019

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.

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.
Support Team
Support Team posted this 05 March 2019

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

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
You must log in or register to leave comments