Hello
I have introduced some new pages with tables statistics, like fixtures, standing, etc… I notice that they are not displayed on mobile, so I would like to know if it´s possible to resize them to display them for responsive, because they appear just a few.
For example, I have introduced a table with 700 px width, and for mobile responsive it just show approximately 300 px, and the rest is not displayed.
Thanks
Hello,
If you have a fixed width set to any element, then the responsiveness will be broken. try to set the width in % and see how it goes. If it’s an iframe then change the iframe width to % not px.
I hope this helps.
Thank you!
Hello
Ok I understand, I have tried to change it to %, but I lost the size I would like for desktop. Is there any option to combine them, 700px for desktop and responsive for mobile?
In this case, it´s a shortcode plugin what I am trying to display.
Thanks
Hello,
You can do it with css media queries. you can give a fixed size to your element on desktop and a dynamic one for tablets/phones. You can place the code directly in the specific viewport from the theme panel: http://screencast.com/t/wWhFwulG9
Thank you!
Hello
Yes, I had seen that. But, I don´t know exactly the code I must introduce there.
Thanks
Hi,
Well you will need to know a bit of css to do it. Keep in mind that if the table is an iframe it cannot be targeted from the panel so the css must be added inline. I could help out if you provide a link to your website so i can inspect the table.
Thank you!
Hello
Ok, I understand. The website is http://www.futbolday.com
You can see all tables in “Estadísticas” section.
The tables are simple shortcodes powered by a football plugin which shows league tables, fixtures and results. I can adjust different sizes before being displayed.
Thanks
Hello,
In this case, if you have access to sizes, simply use a width of 100% instead of 700px as you have it set now and it should position properly. 700 px will not work as the post content area has 696 px width. You can simply leave it to 100% and it will always take up as much space as it can get.
If you want to set your own sizes, You can use css like so:
@media (max-width: 1140px){
.sitable{
width:100%!important
}
}
I hope this helps.
Thank you!
Hello
I have solved the problem changing the width to 100% instead of 700px. It works great and all the content is perfectly displayed.
Thank you very much
