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.
An example of a page in the same template (but with only one image) that does work is here.
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).
@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
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.
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)
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..
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.
Here is my CSS:
And here is my html:
An example of a page in the same template (but with only one image) that does work is here.
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).
@outtacontext, that link doesn't seem to work
@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/
@outtacontext, my first guess would be the width of 43em's on
#table. Each of the cells have percentages, but with the width of#tableat 43ems, it will always be percentages of that 43em'sOkay, 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.
@outtacontext, http://codepen.io/ChrisPlz/pen/draBu
I used inline-block instead of tables or floats..is this what you were after?
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.
@outtacontext, from the Mozilla Developer Network:
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..
Thanks Chris!
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, no..not really, I wrote out the html I thought I needed, then realized I didn't need those classes.
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:
Also, am I mistaken, are some close brackets in the wrong place?
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:
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.
Sorry this has been such a bear to help. I do appreciate it.
Okay, it turned out to be a crazy server cache issue. Thanks Chris for all your help!