The giving page uses a fixed width table.  That being the case, it won't be responsive.   Tables are designed for information and data, as opposed to structure.  When using tables as structure, you can run into things like this.

My recommendation would be to rebuild the page without using tables.

Connie David dan-gallagher@dioceseofscranton.org  
Above is Ryan's advice concerning the Giving page.

Hi Ryan

You and Veronica introduced me to tables on the Directory page, and in fact, Veronica modified the page to include the tables as we were all on the phone on a conference call.  I don't recall any warning about its lack of mobile responsiveness from either of you...  What can we do now with that page to achieve the goal of displaying the office links next to photos of buildings on full site, but displaying links below the photos on mobile site?

Thank you,
Connie

Also, to accommodate the rebuild of a Giving page (without table) can you please increase the number of links allowed in the What Can I Help You Find? block?  

Thank you,
Connie

Connie,

A couple things to address here.  When the tables button was added to the editor, I was under the impression you've used them before.  Furthermore, my primary focus and role is development of the site theme, and functionality to accomplish what you want and need to do.  I tend to be quite literal when explaining why something doesn't work the way one expected it to.

That said... tables.  Tables are in the content world but straddle the line due to the structure it creates within the content.  Generally speaking, I don't recommend using tables for page layout purposes.  However, there are several ways they can be used successfully, but the lesson here is that tables are not one size fits all.  Often times when using a table, we'll need to know a little more about how it's being used in order to accommodate it.

In this Directory case, we can leave the table and "break out of it" figuratively on mobile.  I say figuratively because it will still be a table but we can manipulate how the table works and displays.  This example is simple and straight forward for a couple of reasons.  Namely, there's no widths set on the table or cells, and it's only 2 columns.  I'll go ahead and set a rule to "stack" the cells on mobile for this table.

The reason I wouldn't make this rule the default rule is due to the nature of tables, and other use cases wouldn't necessarily need to break out of the table.

Which brings me to the original case brought to my attention, the Giving page.  The lack of responsiveness in this particular case isn't that it's a table, it's that it has fixed widths.  Fixed widths of any variety are "responsiveness kryptonite", especially if those widths exceed the viewport dimensions.  What you could do, would be to use percentage widths and combine that with style sheet adjustments to break that particular table out of it's structure.  While, doable, in my opinion that's the easy way out.  My recommendation was opinion based, influenced by best practices.  If you wanted to keep it a table for now, we can do that.  In that case, my recommendation would be to treat this is a temporary solution, and I would recommend you rebuild the page without tables when convenient.

My priority with explaining all of this was to clear up the table vs. responsiveness issue. By filling in the gaps and explaining the differences, I hope you have a better understanding of tables, responsiveness, and where I was coming from when asked about an issue on a specific page.

Thank you, Ryan.  I am an IT professional, but not skilled in website development at all!   I really appreciate your explanation and willingness to modify the Directory page to accommodate our needs for both full site and mobile.  As for the Giving page, I honestly would prefer we handle the navigation (built as a table by Dan) in the right sidebar, using the What Can I Help You Find? construct, but I have not been successful in talking the Development Office into that option.  So, can I ask that you either "fix" the table or offer some guidance to Dan on adjusting it in the manner you describe in order to make it responsive?  I don't know if he's ever had to deal with this issue, as our old site is not responsive in the least!

I will share the concerns about the use of tables with our web editors so as to avoid this type of issue in the future.

As always I appreciate your professionalism and willingness to explain in detail the reasons why things work or don't work in this complicated process of building a website.

Thank you!
Connie

Connie dan-gallagher@dioceseofscranton.org

Changing the number of links is just a setting for me.  I changed it from 4 to 10.

I've tweaked the Directory page tables with some identifiers, so that I can handle them in a mobile responsive capacity.  I've completed those changes to make the Directory page mobile responsive while still using tables.  I think you'll find the end result to be what you were hoping for.