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

Design

Andrew Lundy
Andrew Lundy
13,269 Points
Posted by Andrew Lundy
Andrew Lundy
13,269 Points

Trying to create responsive tables.

Hello all! I'm trying to make an already built (what I would call landing page) site responsive. The site looks GREAT on my Google Pixel XL 2, and when I scale Chrome down - as well as using the dev tools to simulate mobile devices. When you bring the site up on an actual apple device it doesn't become responsive. The client pointed this out, and I confirmed on my wife's iPhone X. I've added <meta name="viewport" content="width=device-width, initial-scale=1.0"> to the very end of my head section.

My mentor recommends refactoring it so everything is a div, and basically 'folds like a deck of cards' when on mobile site. I don't think this HAS to be done due to the fact that it looks GREAT on my phone. You can view the live site here -> http://andrewlundy.org/client-sites/speedtraining/speed-training-challenge/newindex.html

Any ideas on what I can do?

1 Answer

Max Senden
Max Senden
23,177 Points
Max Senden
Max Senden
23,177 Points

Hi Andrew,

The website doesn't shrink to the screensize of my Huawei phone. It falls of the screen. The chrome developer tools will only give you a general idea if the responsiveness of your website is okay. But you really should test it on as many devices as possible, and on different browsers to get a proper idea if it works or not.

For what reason did you put everything in tables? Why deviate from the convention of using divs? Tables are generally used of grouping data together, not different elements of the website. Working with divs will also greatly improve you coding experience as you don't have to work with <th> <tr> and so on. It will also improve on your SEO and enable people with assisting devices to view and read your website. Right now the website reads as one big untitled body tag.

Check the MDN network on how to create a proper responsive website: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Last bit not least: looking at the source of your website there are many missing quotes around your class names. For example class=bodytext will not apply any styling. class="bodytext" will apply the styling.

Hope it helps, Max

Andrew Lundy
Andrew Lundy
13,269 Points
Andrew Lundy
Andrew Lundy
13,269 Points

I simply was using what the client already had and trying to make it responsive. I've already had the idea of using divs, but wasn't too sure because it looks fine on my phone. Thanks for pointing the class name thing out, I'll go back and apply those quotes. Very weird since everything is styled how it should be. Thanks mate. I'll be taking a break from freelancing as I guess I still have much to learn.