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

HTML

Posted by Clayton Tevebaugh
Clayton Tevebaugh
7,617 Points

Responsive Design Question -- What is a good resource for testing your site's responsive design on mobile?

Hey guys. How do you test responsive design when you build a website?

I was adjusting the screen size as small as Crome would let me when building the site thinking that would represent how it would look on a mobil phone. Although when I made the site live my layout was really broken. What are some tools to help me avoid this mistake in the future.

For anyone that wants to critique the site its here. jesteredtheater.org

J Bacon
J Bacon
Courses Plus Student 2,669 Points

Site doesn't load for me. You could use chrome dev tools

2 Answers

sizwengubane
sizwengubane
15,244 Points

Use the google chrome dev tools its the best place for you to test your website in different viewports and screen sizes.

  1. Go to the drop down settings menu on your google chrome browser
  2. Go to 'more tools' and then select 'developer tools' Then u will see a tab with a small 'phone icon' click that and the rest is easy hope this helps
Clayton Tevebaugh
Clayton Tevebaugh
7,617 Points

This helped so much. It's not perfect to what it looks like on mobile or how it behaves but it's a really nice way to get close.

Clayton Tevebaugh
Clayton Tevebaugh
7,617 Points

This helped so much. It's not perfect to what it looks like on mobile or how it behaves but it's a really nice way to get close.

rdaniels
rdaniels
27,258 Points
rdaniels
rdaniels
27,258 Points

There were a couple of testing sites suggested in one of the classes. The ones I wrote down for reference were:

  1. validator.w3.org (validate by direct input -> just cut and paste)
  2. jigsaw.w3 org (css validator) They both looked pretty easy to use and will test across multi-platforms... Hope this helps!