Tables Not Scrolling and Over the Edge when viewed in mobile
Autor: Michael LudwigI had a great response to my comment https://helpcenter.websitex5.com/es/post/256430 and using the fix given was able to amend each table as i wanted.
I went to do the same on another page
https://www.craigynoscastleweddings.com/wedding-competitor-prices.html
The page is fine until view on a mobile and what happens is that the table retains its position (there are 6 tables) one after the other and the first table seems ok (until you add others in) see https://www.craigynoscastleweddings.com/x.html but when you add multiple tables in (as objects) there is a massive white gap to the right of the table.
I had thought about having one great big table, but am unsure if this will resolve the issue.
I have tried the code as
<style>
@media (max-width: 400.0px) {
#imTableObject_472_544 {
display: block;
overflow-x: auto;
}
}
</style>
<style>
@media (max-width: 400.0px) {
#imTableObject_478_549 {
display: block;
overflow-x: auto;
}
}
</style>
<style>
@media (max-width: 400.0px) {
#imTableObject_478_546 {
display: block;
overflow-x: auto;
}
}
</style>
<style>
@media (max-width: 400.0px) {
#imTableObject_478_551 {
display: block;
overflow-x: auto;
}
}
</style>
<style>
@media (max-width: 400.0px) {
#imTableObject_478_547 {
display: block;
overflow-x: auto;
}
}
</style>
That didnt work as i found i had missed out one table, so tried again with the missing table.
Then, tried:
<style>
@media (max-width: 479.9.0px) {
#imTableObject_478_544 {
#imTableObject_478_545 {
#imTableObject_478_549 {
#imTableObject_478_546 {
#imTableObject_478_551 {
#imTableObject_478_547 {
display: block;
overflow-x: auto;
}
</style>
So my final try which can be seen at https://www.craigynoscastleweddings.com/y.html
Still makes no sense but contains the cod
<style>
@media (max-width: 400.0px) {
#imTableObject_478_544 {
display: block;
overflow-x: auto;
}
}
</style>
<style>
@media (max-width: 400.0px) {
#imTableObject_478_545 {
display: block;
overflow-x: auto;
}
}
</style>
<style>
@media (max-width: 400.0px) {
#imTableObject_478_549 {
display: block;
overflow-x: auto;
}
}
</style>
<style>
@media (max-width: 400.0px) {
#imTableObject_478_546 {
display: block;
overflow-x: auto;
}
}
</style>
<style>
@media (max-width: 400.0px) {
#imTableObject_478_551 {
display: block;
overflow-x: auto;
}
}
</style>
<style>
@media (max-width: 400.0px) {
#imTableObject_478_547 {
display: block;
overflow-x: auto;
}
}
</style>
Hello. I already answered this question yesterday. Did my advice help you?