WordPress.org

Forums

Brunelleschi
[resolved] iPhone Table Width CSS issue (3 posts)

  1. tbase26
    Member
    Posted 1 year 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?

  2. CrouchingBruin
    Member
    Posted 1 year ago #

    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.

  3. tbase26
    Member
    Posted 1 year ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic