iPhone Table Width CSS issue

  • Resolved tbase26

    (@tbase26)


    10 years, 11 months ago

    This is a great theme and had been fun to customise. But now I have hit a wall and it has stumped me for over two months now. So have given in and decided to post this SOS here.

    The page in question resizes the thumbnails fine for iPad, but boxes are left off when it comes to the iPhone.

    Have tried writing own media query in child theme but not sure I’m using the correct CSS

    Have started with this to begin with but it doesn’t make any difference

    @media only screen and (max-device-width:400px){

    .size-thumbnail {
    width:100%;
    padding:0px;
    margin:0px;
    height: auto !important;
    }
    .wp-caption-text {
    width:100%;
    height: auto !important;
    }

    Can anyone help?

Viewing 2 replies - 1 through 2 (of 2 total)

  • Tables are notoriously bad for responsive sites. Instead of organizing all of the profiles in a table, why don’t you put them in individual DIVs and float them? Then they’ll rearrange themselves on different viewport sizes. This especially suits the data that you are displaying, since they aren’t related to one another. You can see a demo here. That page should even display properly on a smartphone; you won’t be able to do that properly with a table.

    Thread Starter tbase26

    (@tbase26)

    Dear CrouchingBruin

    Thank-you so much for your help. I was looking at it in completely the wrong way and that was so spot on. Indeed it’s got me thinking about other ways I could turn other sites of mine into more responsive design

    The page in question now works just as I wanted it.

    Many thanks for your help – Have a great Xmas

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘iPhone Table Width CSS issue’ is closed to new replies.