-
AuthorPosts
-
October 20, 2022 at 6:05 pm #1369641
Hi,
I have created a comparison table.
It displays info ok on desktop but some info is not displaying on a mobileSee private
Can you advise how to fix
October 21, 2022 at 5:57 pm #1369749Hi,
Please could you feedback on this so I can fix the issue.
Thanks
MarcusOctober 21, 2022 at 7:33 pm #1369762Hi,
Thank you for the link to your table, on desktop the rows you mention are empty, for example “Charger specs”
and mobile these empty rows are also shown:
Perhaps you mean that you would like the mobile table to have the same layout as desktop, but since your table has so many columns it would be hard for the user to read, some table plugins do well with horizontal scrolling for mobile devices, if this is what you are looking for perhaps try one of these.Best regards,
MikeOctober 22, 2022 at 11:32 am #1369785Hi,
We need the space for the headers to separate the content.
Is there any way that the blank boxes can be removed on mobile?
OR should I remove the sub headers altogether?
Thanks
MarcusOctober 22, 2022 at 1:10 pm #1369792Hi,
I could probably write some code to hide the blank boxes on mobile, but I don’t understand their purpose on desktop, are they going to have content in the future?
If not perhaps you should remove them as they make your table look incomplete.Best regards,
MikeOctober 23, 2022 at 10:47 am #1369848Hi Mike
The blank boxes act a s a separator for the sub heading – which work on desktop but not on a mobile as they stack.
Thanks
October 23, 2022 at 6:33 pm #1369879Hi,
Thanks for the feedback, this css will remove them on mobile:@media only screen and (max-width: 767px) { #top #av_section_1 .avia-data-table tr:nth-child(7) > th:nth-child(n+1), #top #av_section_1 .avia-data-table tr:nth-child(13) > th:nth-child(n+1), #top #av_section_1 .avia-data-table tr:nth-child(17) > th:nth-child(n+1), #top #av_section_1 .avia-data-table tr:nth-child(23) > th:nth-child(n+1), #top #av_section_1 .avia-data-table tr:nth-child(30) > th:nth-child(n+1), #top #av_section_1 .avia-data-table tr:nth-child(33) > th:nth-child(n+1) { display: none; } }
After applying the css, please clear your browser cache and check.
Best regards,
Mike -
AuthorPosts
- You must be logged in to reply to this topic.