Solved

Responsive design best practice for wide content

Posted on 2015-01-08
6
196 Views
Last Modified: 2015-01-14
I am working on converting our site to a responsive site. I have created a few break points based on browser width. It works quite well until certain content elements gets in the way...

For example on the page there is a table that is set to 100% width and it has 5 columns in it

i.e. |column1|column2|column3|column4|column5|

Because the column text has no break points the table can not be less then 500px wide (for example). So the table width is exceeding the body width (I have my minimum body width set to a standard 320px).

What is best practice in this case? How to adjust/scale the table to fit the width of the page down to the minimum 320px?
0
Comment
Question by:intoxicated_curveball
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
6 Comments
 
LVL 43

Expert Comment

by:Rob
ID: 40539235
If you're referring to <table> elements, they're not responsive.

If you're referring to other elements then how are you coding your site?  Are you using bootstrap or doing it yourself?
0
 

Author Comment

by:intoxicated_curveball
ID: 40540007
Table elements are not responsive? Actually they are in terms of scaling and size, just like anything else. But this is an example as some of the content pages contain tables with tabular data.

I'm using my own code.
0
 

Accepted Solution

by:
intoxicated_curveball earned 0 total points
ID: 40540018
I have solved my problem. I will just apply an outer div to the table and use overflow scroll.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 43

Expert Comment

by:Rob
ID: 40541145
Yes you can resize them sure but that's not responsive IMO.  Responsive is about displaying content on all devices in a readable fashion.  Wrapping the table in a div with scrollbars would drive me crazy if I had to look at it on my phone.  I understand you have tabular data but it could be formatted differently and still retain the "tabular" idea.

You should have a read of this article as it explains exactly why scrollbars is a bad idea: http://css-tricks.com/responsive-data-tables/
0
 

Author Comment

by:intoxicated_curveball
ID: 40547465
Rob Lurd: At the time it was the best solution I had come across. Actually I found a better solution which is simply to use table-layout: fixed. This ensures the width of the table always is no more then the width of the page. And to solve the issue of content being longer then the cell width I'm using overflow scroll, this only appears in rare cases.

The link you provided is not a suitable solution as it involves applying Table header content at the CSS level, which is impossible when you are dealing with a site containing hundreds of tables.
0
 

Author Closing Comment

by:intoxicated_curveball
ID: 40548531
I found the solution
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question