Search the Community

I have a website that has multiple views based on three items: Desktop Phone Tablet I use media queries to adjust the widths of content. Here's my problem. Page is PHP and you can pass &showone=1 as part of the URL to only show one table. With two tables looks like this: Text is perfectly centered over tables but as you can see, tables are left justified and space on the right. Normally title would center in the middle of the right table due to centering on the "page". I did this basically hard coded thru media queries so: /* desktop */ @media only screen and (min-width : 1224px) { th { font-size: 1.6em; font-family:Sans-serif; } td { font-size: 1.65em; line-height: 1em; font-family:Sans-serif;} h1 { font-size: 1.75em; line-height: 1.5em; } h2 { font-size: 1.25em; } table { width: 500px; align: left; } .centering {width: 1020px; padding-top:5px; border:0; margin-top:2px; text-align: center; font-size: 1.6em; font-family: Sans-serif; font-weight:bold;} } The .centering being passed using echo "<p class='centering'>Pool Mining: " . strtoupper($obj['multiport']['mining']) . "</p>"; Now if someone says they only want one table I get: See the problem then? The centering doesn't move over the first table as that's the only element left. Didn't expect it would the way it's setup. I can't figure an easy way based on the dynamic nature of the content, to tweak the placement of the titles based on the total content. I also have this issue with iPad in landscape mode. Ipad and iPhone in portrait mode the tables reorientate under each other so one table or two space us across is the same. Thoughts on how to get this to work? Tried doing a div with inline-block but it causes the second table to go under the first line all the time. Oddly tab on IE to another tab and tab back they were side-by-side again but not really a working solution and all other devices that didn't work at all. Thoughts? Thanks.