Mobile Site Question

Discussion in 'Web Design and Development' started by Ferc Kast, Aug 17, 2015.

  1. Ferc Kast macrumors regular

    Ferc Kast

    Joined:
    Sep 26, 2012
    Location:
    Ohio, USA
    #1
    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?
     
  2. Dubadai macrumors regular

    Dubadai

    Joined:
    Jun 16, 2015
    Location:
    Stockholm, Sweden.
    #2
    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. :)
     
  3. Ferc Kast thread starter macrumors regular

    Ferc Kast

    Joined:
    Sep 26, 2012
    Location:
    Ohio, USA
    #3
    Okay. Here's the two views of the page from my in-progress site.

    image.png image.png
     
  4. chabig macrumors 68040

    Joined:
    Sep 6, 2002
  5. Gav2k macrumors G3

    Gav2k

    Joined:
    Jul 24, 2009
  6. -pete- macrumors member

    Joined:
    Apr 20, 2011
    #6
    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:

    Code:
    /* ----------- 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
     
  7. Dubadai macrumors regular

    Dubadai

    Joined:
    Jun 16, 2015
    Location:
    Stockholm, Sweden.
    #7
    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!
     
  8. D.T. macrumors 603

    D.T.

    Joined:
    Sep 15, 2011
    Location:
    Vilano Beach, FL
    #8
    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.

    ?
     
  9. Ferc Kast thread starter macrumors regular

    Ferc Kast

    Joined:
    Sep 26, 2012
    Location:
    Ohio, USA
    #9
    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.
     
  10. 960design macrumors 68000

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #10
    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/
     

Share This Page