Mobile Site Question

[Ferc Kast]

So, I'm using my iPhone 6 to test the layout of my site's mobile theme. The only issue I have had is a table that has a column with cells that taking multiple lines for its content. If I take away one column, it looks pretty in portrait, but in landscape it now has too much space. Is there a way that I can hide the column if the screen width is less than xyz? Or is there another solution I'm overlooking or am I simply being too OCD over the issue?

 

[Dubadai]

I have a hard time understanding exactly what the issue is.

Is there any way that you could post screenshots from the iPhone, and the computer, to show the differences? As well as in portrait and landscape mode etc.

 

[Ferc Kast]

Okay. Here's the two views of the page from my in-progress site.

 

[chabig]

I think landscape looks nicer.

 

[Gav2k]

Both look fine

 

[-pete-]

Hiding content is reasonably simple to do by using some CSS with media queries, without knowing the exact syntax of your table its a little tricky to give you a complete answer but you should be able to do something along the lines of the following, in your sites CSS file:

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2) {

/* Target the third td in a row */
table#yourtableid tr td:nth-of-type(3n+1) {
 display:none;
}

}

Beware that the above is targeted to work on iPhone 6, you could remove the min-device-width should you wish to target devices that are smaller.

You can read more about media queries here and more about the nth selector here

 

[Dubadai]

I think both look really good. Unless there is some information that you need beside the table in landscape mode, i would keep it like this. Clean and easy to read, just like it should be!

 

[D.T.]

If you're trying to prevent the multi-line text you can use:

<element>
{
white-space: nowrap;
}

However, that might mean the portrait layout won't be constrained the table width, so you'll have scrolling.

?

 

[Ferc Kast]

The nth did the trick, and I used it to also do alternating row colors instead of using my database to specify if it was odd or even.

 

[960design]

I use media queries for tables on mobile devices with smaller screens ( phones ):

I dislike posting a link to explain something, but this is a little more complex than just posting a few lines of code so here's the link. This will give you an idea of what I do for all mobile devices:

https://css-tricks.com/responsive-data-tables/