ClassCreator.com | Blockbuster sites, amazing reunions

Share Tips

New Topic Subscription Options  

Responsive Design and Tables

Forums: Questions and Answers About Building Your Site
Created on: 01/17/17 06:13 PM Views: 1410 Replies: 6
Tuesday, January 17, 2017 at 6:13 PM

I have a number of tables in my site as well as photo files (mostly png)and when I view them on my cell phone the cells in the tables don't "stack" like the photos and text do. I have to scroll to the right to see the whole tables with multiple cells. I have tables on the "New Here" page that do this. Is there some way to handle this or is it just a bad idea to use tables in Responsive Design?

The site that I am worried about is http://www.classcreator.com/Redmond-Oregon/class_index.cfm
not the one shown to the left.

Reply
Edited 01/17/17 6:15 PM
Tuesday, January 17, 2017 at 6:16 PM - Response #1

Where is the "New Here" page? Is it called "New Here"?


Reply
Tuesday, January 17, 2017 at 6:27 PM - Response #2

It's not on the high school site, it's on the one I am working on for our church -- but not active yet.

http://www.classcreator.com/Redmond-Oregon/class_index.cfm

Yes, it is the page called "New Here"

Sorry for the confusion but use the site to the left.

Jim

Reply
Edited 01/17/17 6:28 PM
Tuesday, January 17, 2017 at 6:37 PM - Response #3

As in the other response, RD design requires one to MANUALLY edit the source or use an alternate design. The Editor is pretty basic html oriented.

Basic tables do not work because you've given them absolute dimensions, not RD type constructs.

CSS is one of the methods that gets RD designs to work properly. This LINK is a good article even though it's old. Ignore the IE9 comment there.

The one about turning a table into a mini-graphic is pretty easy if it fits the goal.

Jim Persing wrote:

I have tables on the "New Here" page that do this. Is there some way to handle this or is it just a bad idea to use tables in Responsive Design

Reply
Tuesday, January 17, 2017 at 6:45 PM - Response #4

For example, to illustrate how a table with absolute sizing is the issue, take the text that is now in a table and just remove this table size (style="height:200px;width:700px;"). The text automatically now resizes correctly.

Do a google search "responsive table design" to get other ideas.

Reply
Tuesday, January 17, 2017 at 6:56 PM - Response #5

Another example:

To get the Welcome image to resize correctly edit the absolute dimensions. Change style="width: 1000px; height: 211px;" to style="width: 100%" (or make the percent less than 100 to get what you want. Now the image resizes correctly.

Reply
Wednesday, January 18, 2017 at 1:59 AM - Response #6

Thanks, Jack. I will certainly try these tips. I am anxious to get the Responsive Design to work correctly.
Jim

Reply
New Topic  
Subscription Options: Have all new forum posts sent directly to your email.
Subscription options are available after you log in.