Solved

Responsive design best practice for wide content

Posted on 2015-01-08
6
194 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
  • 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
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

789 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