Responsive Table On Mobile
-
Hi, I’m having troubles with my table layout on mobile. I’ve found this CSS which will tell media smaller than 600 to do a vertical table instead:
@media screen and (max-width: 600px) { table {width:100%;} thead {display: none;} tr:nth-of-type(2n) {background-color: inherit;} tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;} tbody td {display: block; text-align:center;} tbody td:before { content: attr(data-th); display: block; text-align:center; } }Problem is that the cells aren’t preceded by the relevant header like on this example
Apparently I have to put the following JS before /body:
<script> var headertext = []; var headers = document.querySelectorAll("thead"); var tablebody = document.querySelectorAll("tbody"); for (var i = 0; i < headers.length; i++) { headertext[i]=[]; for (var j = 0, headrow; headrow = headers[i].rows[0].cells[j]; j++) { var current = headrow; headertext[i].push(current.textContent); } } for (var h = 0, tbody; tbody = tablebody[h]; h++) { for (var i = 0, row; row = tbody.rows[i]; i++) { for (var j = 0, col; col = row.cells[j]; j++) { col.setAttribute("data-th", headertext[h][j]); } } } </script>I’ve tried inserting it in a text/html widget in my footer but WP keeps deleting the <script></script> tags when I save …
is there any way of making this method work or a better method for responsive tables?
Any help would be much appreciated – at wit’s end.
The blog I need help with is: (visible only to logged in users)
-
-
Update: I have found a fix using a scrolling table … Android works great now, but site is still only occupying a third of width of the screen on iOS top right and just short of whole screen when rotated horizontal … I’d assumed the wide table was causing the layout issue on iOS but I’m utterly perplexed now … any ideas?
-
Update: Nothing is simple. Have identified three different issues using mobiletest and available handsets:
1. Header layout issues on phones with screens less than 360 pixels wide – can I specify a shorter title for these screens in css?
2. Site occupies less than full width of screen
iPod Touch – any ideas?3. Off Screen Scrollable White Space
Google Nexus 7, Samsung Galaxy Y, HTC ONE, ZTE (Android),
Nokia Lumia 7 (Windows)
iPhone 5 – this seems pretty common, not so worried … but is there a fix?This is an example of problems 1 and 3 http://mobiletest.me/samsung_galaxy_y_emulator/?u=http://meanfxspreads.com
Have been unable to replicate problem 2 using mobiletest.
-
Update:
Problems 2 and 3 seem to be relatedIf I zoom out on ZTE Android, looks identical to iPod touch problem ie content only occupies small portion of the screen’s width – rest is white space. I can’t test this on mobiletest, but assume it’s the same for the other handsets with problem 3.
-
-
Actually I’ve just noticed another issue in page and post headings – seems to have spontaneously appeared.
In longer headings (all three posts on main page) there is an issue with character spacing – only seems to affect the last two words/numbers in a heading – they are appearing as if there is no space typed between the twowords.
-
On the header area, there are two things controlling the height. First is padding, and second is a minimum height for .site-header-image. The top/bottom padding was originally 10% and the min-height was 426px. The following changes those to 5% and 326px respectively and seems to do the trick. You can of course play with the numbers.
.site-header-image { padding: 5% 0; min-height: 326px; }On the word spacing issue, I’m not seeing that in Firefox, Chrome or Safari. Are you still seeing that? If so, in which browser?
-
Hi mate,
Is that the best way of doing that? It doesn’t really behave as I’d expect ie padding has to be manually adjusted depending on selected header image size and hence causes further off-centre issues on tablet/mobile.re: character spacing issue, it’s happening to me on firefox but chrome seems fine. Weird.
-
Update: I have managed to fix on tablet preview using @media:
@media screen and (min-width: 550px){ .site-header-image { padding: 7% 0; min-height: 320px; } } @media screen and (min-width: 550px) and (max-width: 800px) { .site-header-image { padding: 8% 0; min-height: 200px; } } -- A little sketchy though - could this cause issues on tablet screens larger than 800 px but smaller than desktop? -
Hmmm, it could. If you narrow your browser window slowly and see what happens above 800px and below, say 1200px. I checked on my iPad in portrait (768px) and in landscape (1024px) and all looks good though.
-
Cool thanks mate. So no idea about the character spacing issue? I forced a refresh but still apparent … though not so worried if you can’t replicate.
I have two things I need to change and then I’ll leave you alone!
How do I adjust the margin/padding between my menu and my body content? it’s way too wide now with the smaller header.
Also, when I hover over title it turns red like other links and wordpress.com footer is red default – how can I change links in these areas to white?
-
Hi there, I’ll answer your questions in batches.
Also, when I hover over title it turns red like other links and wordpress.com footer is red default – how can I change links in these areas to white?
Give this a try and let me know how it goes:
/* Site Title hover white */ .site-title a:hover { color: #fff; } /* Footer credit white */ .site-footer a, .site-footer a:visited, .site-footer a:hover, .site-footer a:focus, .site-footer a:active { color: #fff; } -
How do I adjust the margin/padding between my menu and my body content? it’s way too wide now with the smaller header.
You can try adding a new piece of CSS within one of your existing media queries, to avoid repetition:
@media screen and (min-width: 800px) { .site-header-image { padding: 6% 0px; min-height: 300px; } /* Reduce top margin */ .site-content { margin-top: 50px; } } -
In longer headings (all three posts on main page) there is an issue with character spacing – only seems to affect the last two words/numbers in a heading – they are appearing as if there is no space typed between the twowords.
I wasn’t able to find an instance of this when looking at your site in Firefox. Could you provide a link to the exact page as well as a screenshot?
Here’s a guide on how to make a screenshot:
http://en.support.wordpress.com/make-a-screenshot/You can upload the screenshot – in a graphic format like JPG, PNG, or PDF – in your Media Library so I can see it. Thanks.
-
Hi Kathryn
Perfect.Home is now a static page so spacing issue only occurs once. I’ve uploaded screens of three occurrences in Charts category – you should be able to see them in my media library.
I have also discovered another issue (hopefully the last one!)
Menu looks fine on desktop – but just noticed it looks real trash on tablet and mobile when it drops down – there’s 0 margin/padding between menu edge and text. Would like to fix this and maybe play around with a white border around the menu. -
Home is now a static page so spacing issue only occurs once. I’ve uploaded screens of three occurrences in Charts category – you should be able to see them in my media library.
Thanks for the screenshots! Could you please tell me in what browser and version are you seeing this, and on what operating system and device (i.e. Windows 8 laptop)? I’m not able to see the missing space in either Firefox 48.0.1 or Chrome 53.0.2785 on Mac 10.9.5.
WordPress.com has a feature where a non-breaking space is added between the last two words in post titles, to prevent typographic widows. For some reason that space is not showing correctly on your end. (I can see that non-breaking space in the code when I view your site using a browser inspector.)
-
Menu looks fine on desktop – but just noticed it looks real trash on tablet and mobile when it drops down – there’s 0 margin/padding between menu edge and text. Would like to fix this and maybe play around with a white border around the menu.
You can add some padding to the left of mobile menu items, and a border around the entire thing, like this:
@media only screen and (max-width: 800px) { .main-navigation li { padding-left: 10px; } .nav-menu { border: 1px solid #ffffff; } } -
Thanks Kathryn – worse a treat. Looks much better now with a solid grey border and menu items in line with the button. You’re a boss!
I’m on latest Firefox 48.0.2, Windows 8.1 laptop.
- The topic ‘Responsive Table On Mobile’ is closed to new replies.
WordPress.com Forums 