Grow your CSS skills. Land your dream job.

Making a Non-Data Table Responsive

  • # March 12, 2013 at 11:58 am

    My WordPress Theme is responsive and is working fine. However, on one page I wanted to create two images as bookends with text in between. And the content within the table is not being responsive. You can see the page [here](http://www.outtacontext.com/wp2/about/jeffs-past-so-many-dopplegangers/ “Example of my table”).

    Here is my CSS:

    .page-template-template-jeffpast-php div#table {display: table; height: 40%; width: 43em; margin: .9em 0; background-color: #000;}
    .page-template-template-jeffpast-php div.row2 {display: table-row; }
    .page-template-template-jeffpast-php div.cellleft {display: table-cell; width: 24%; padding-top: 1em; padding-left: 2.5em;}
    .page-template-template-jeffpast-php div.cellmiddle {display: table-cell; width: 26%; vertical-align: top; padding-top: 3em; background-color: #000; color: #fff; padding-left: 1.5em;}
    .page-template-template-jeffpast-php div.cellright {display: table-cell; width: 33%; padding-left: 1em;}

    .page-template-template-jeffpast-php div.cellleft img a{ display: block; border: 0; max-width: 100%; }
    .page-template-template-jeffpast-php div.cellright img a{ display: block; border: 0; max-width: 100%; }
    .cellmiddle p a {color: #ccc;}

    And here is my html:

    Dance Lesson illustration

    I majored in Political Science and my first roommate’s name was Rick Gates. He was from DeTour Village, Michigan (on the tip of the Upper Peninsula). Back then, the golf course on nearby Drummond Island doubled as the airport.

    Rick was tall and lanky and I was, well, not. Yet, no one in our dorm could tell us apart. Everyone called me Rick. This was my first identity crisis. Little did I know my name and looks would lead me to others…

    Dance Lesson illustration

    An example of a page in the same template (but with only one image) that does work is [here](http://www.outtacontext.com/wp2/about/jeffs-past-the-beginning/ “A Page That Works”).

    Can anyone tell me how I can get this cell to be responsive? BTW, I tried floating divs instead of display:table, etc. and I could never get it to look like this (which is the way I want it to look).

    # March 12, 2013 at 12:31 pm

    @outtacontext, that link doesn’t seem to work

    # March 12, 2013 at 12:40 pm

    @ChrisP: do you mean the two links on the words “here”? They’re working for me.

    Here’s the page in question: http://www.outtacontext.com/wp2/about/jeffs-past-so-many-dopplegangers/

    And here’s the page with only one image that works: http://www.outtacontext.com/wp2/about/jeffs-past-the-beginning/

    # March 12, 2013 at 12:49 pm

    @outtacontext, my first guess would be the width of 43em’s on `#table`. Each of the cells have percentages, but with the width of `#table` at 43ems, it will always be percentages of that 43em’s

    # March 12, 2013 at 1:16 pm

    Okay, so do you think I should use only one type of measurement throughout the whole table (either all ems or all percentages)?

    I did an experiment with floats instead of the table. This is what I got: http://www.outtacontext.com/wp2/about/table-test/

    Now to build an even area around the three divs I put them all in a div with the class of “blah”. Then I tried to put a background-color of black to the blah div but nothing happens. If I add a style for margins or padding you can see the change but I don’t understand why I’m not seeing the black background.

    Now the left and middle divs seem to be responsive. But the right div doesn’t change size.

    # March 12, 2013 at 1:28 pm

    @outtacontext, http://codepen.io/ChrisPlz/pen/draBu

    I used inline-block instead of tables or floats..is this what you were after?

    # March 12, 2013 at 1:34 pm

    Yes! I think so. I will have to add a media query to reduce the size of the text and move things around a bit, but yes. Thank you very much.

    Can you tell me what inline-block does? I read about it as I was trying to troubleshoot this but it wasn’t clear to me.

    # March 12, 2013 at 1:39 pm

    @outtacontext, from the Mozilla Developer Network:

    > The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would)

    https://developer.mozilla.org/en-US/docs/CSS/display

    Unfortunately, inline-block also respects white space between the div’s as well, you’ll notice in my code, I set the font of the parent element to 0, then resized it to 16px within the divs that contain content..your other alternative would be to insert HTML comments between each div..

    < div>…< /div>< div>…< /div>

    # March 12, 2013 at 3:06 pm

    Thanks Chris!

    # March 12, 2013 at 3:12 pm

    Just looked closer at your CSS. Is there a reason you gave classes to the left and right divs even though you just have a style for “div”?

    # March 12, 2013 at 3:47 pm

    @outtacontext, no..not really, I wrote out the html I thought I needed, then realized I didn’t need those classes.

    # March 12, 2013 at 3:58 pm

    Well, I put it in my template and it messed with the whole look. Take a look: http://www.outtacontext.com/wp2/about/table-test/

    Something is wrong. I wanted to make sure the classes were specific to this page only for img and div so I gave your styles class names:

    .box {
    width: 100%;
    max-width: 700px;
    margin: 16px auto;
    background-color: black;
    font-size: 0;
    .doppleganger div {
    font-size: 16px;
    width: 20%;
    display: inline-block;
    vertical-align: top;
    color: white;
    .doppleganger2 img {
    width: 100%;
    height: auto !important;
    }
    }
    .content-doppleganger {
    width: 20%;
    }
    }

    Also, am I mistaken, are some close brackets in the wrong place?

    # March 12, 2013 at 4:06 pm

    Sorry @outtacontext, I should have told you, that pen is in SCSS, so you won’t be able to nest those rules like I did..it will have to be:

    .box {

    }

    .box div {

    }

    .box div img {

    }

    .box .content {

    }

    # March 12, 2013 at 4:15 pm

    Thanks.

    Well, the images are now together but the rest of the them is missing, including the sidebar and the content is pushed all the way over to the left.

    # March 12, 2013 at 4:18 pm

    Sorry this has been such a bear to help. I do appreciate it.

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".