-
Posts
-
Hey all,
Great theme, loving it – but I do currently have an issue with the mobile version of tables. Did a quick search on the forums and didn’t find a similar issue, but I may have missed something. At any rate, the table looks fine on a wide screen, but when viewed on a mobile device or you shrink the browser width on a desktop, css seems to get added to the cell titles of my table. Below are a couple of images showing what I mean.
Bad table (Mobile): http://imageshack.com/a/img922/6465/wT6Ttp.png
Happy table (Desktop): http://imageshack.com/a/img924/4041/sQkcSU.pngI’m running Enfold 3.4.7
Wordpress 4.4.2
Total of 8 plugins, none have to do with tables, but I should be able to disable them temporarily if you think they are the issue (ie there’s a backup plugin, visual form builder pro, etc)Inspecting the css, it looks like the cell title is coming from a ::before selector. Inspecting the ::before shows content:”<span style=\”color:#35679A\”>College/University”
In practice, the content should only be “College/University”, right? I created this table through Enfold, it is not a custom table or a table made with a WYSIWYG editor.If you have questions please let me know, thanks in advance –
~JosephHey jlrushin!
It’s because your adding span tags inside the headings. It would be better to just change their color via CSS instead of using the spans. Or if you just want to get rid of it then add this to your custom CSS.
td:: before { display: none !important; }Regards,
ElliottAh, thank you! I have been maintaining that list/table, but hadn’t created it. Never would have even thought to look into the header row for extra styling…
At any rate, I added .avia-heading-row{color:#35679A;} to the quick css to make all header rows blue, and I’m happy. Not sure if there’s a button or something to click as ‘resolved’ or anything, but I’m all set.
Thanks again!
~Joseph
- The topic ‘Issue with responsive tables – Mobile Version shows css in the table cell’ is closed to new replies.