Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Stefan Durr
9,871 PointsCSS: adjusting table format (number of columns and rows) in a Media Query?
Hi Everybody, I am a beginner with CSS and HTML. I have encountered a slight problem with my table element when adjusting the browser-window size. The table element is a photo-gallery consisting of 2 rows and 3 columns for a total of 6 photos. The table photo-gallery looks fine until you scale down to a browser window size of 644px. At that point the browser window swallows the table image elements so that only the images furthest to the left remain visible. All other elements on the page are responsive and adjust to the browser size. In my media query, when setting the max-width to 644px, is there any way to change the table layout from the original 2 row, 3 column format to a 3 row, 2 column format? Thank you!
2 Answers
A.J. Kandy
Courses Plus Student 12,422 PointsThe best way to accomplish this kind of layout is by abandoning tables, and using CSS positioning with floats, and/or the more cutting-edge flexbox model.
Using tables for layout is a deprecated practice in any case - as long ago as 2001 leading web designers started abandoning it. Today, tables, particularly in a responsive context, should only be used for semantically marked-up tabular data.
The "How To Make A Website" introductory course by Nick Pettit covers this exact case - it has a project to make a simple portfolio site with a responsive gallery layout.
Stefan Durr
9,871 PointsHi AJ thank you for your help on the issue and clarifying that using tables is an outdated practice. I went ahead and rearranged my image gallery into an unordered list with float left, similar to the lesson in the course "how to build a website". Although everything worked out fine, there is one minor issue I was hoping you could help explain. As mentioned, I rearranged my gallery into an unordered list and floated the items left. I used clear: left on the 4th img element so that there was a second row of 3 images. I would like to have these 2 rows of 3 images centered within my div. It did not work with margin: 0 auto; so i went ahead and displayed it inline:block and text-align center to the parent div. This moved it into the middle of the div but did not perfectly center it. I used a header div with an h1 (text-align: center) in comparison and you can see that the image gallery isnt perfectly centered. Why is that the case? Or how can you get the gallery perfectly centered? Here is a link to my simplified codepen: http://codepen.io/anon/pen/zGxNEP?editors=011
Thank you!
A.J. Kandy
Courses Plus Student 12,422 PointsA.J. Kandy
Courses Plus Student 12,422 PointsAs a side note, for anyone who's curious, there are a few ways to build responsive tables (but not for layout purposes).
The Microsoft Office product comparison page uses a very complex set of divs and spans with layered classes to simulate a table, but is actually a group of floated elements; tricky to set up, but it makes a relatively smooth transition across breakpoints, reconfiguring its content as an accordion list on mobile.
There are also CSS/JS frameworks that support responsive table layouts, like ResponsiveBP, and there's an experimental add-on for Zurb Foundation, though it is not recommended for production sites at the moment.
In the short term: it's still pretty complicated, and floats / flexbox is probably a quicker way to get to those results.