?
Solved

Responsive design best practice for wide content

Posted on 2015-01-08
6
Medium Priority
?
201 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
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!

 
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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

752 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