Making a Non-Data Table Responsive

[outtacontext]

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:

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…

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).

[ChrisP]

@outtacontext, that link doesn’t seem to work

[outtacontext]

@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/

[ChrisP]

@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

[outtacontext]

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.

[ChrisP]

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

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

[outtacontext]

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.

[ChrisP]

@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>

[outtacontext]

Thanks Chris!

[outtacontext]

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”?

[outtacontext]

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?

[outtacontext]

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.

[outtacontext]

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

[outtacontext]

Okay, it turned out to be a crazy server cache issue. Thanks Chris for all your help!

[Author]

Posts