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
Grace Ji
5,402 Pointsmaking responsive page
http://port-80-hjpf26nodj.treehouse-app.com
I need help~~~ I want to change the portfolio page responsively. now the gallery on the portfolio page has a 3 columns.
and I want it to change to 2 columns when the browser is smaller than 480px.
I tried with instructor's responsive.css file, but still doesn't work. : (
what code should I check?
Jason Anello
Courses Plus Student 94,610 PointsHi Grace,
You posted a direct link to your workspace which doesn't always work for us.
You can post a snaphot instead which will let us see all the code.
https://teamtreehouse.com/forum/workspace-snapshots
I was able to preview your site and it seems it's going down to 2 columns for me. Are you still having a problem?
Grace Ji
5,402 PointsThank you Jason! snapshot is an awesome tip! :D
https://w.trhou.se/r6rwwegb9g This is my snapshot.
I want to make my site responsively like below when I narrow the browser under 480px.
the images on portfolio page: 3 columns-> 2 columns
the sections on contact page: 2 columns-> 1 columns
what code should I check? :)
3 Answers
Jennifer Nordell
Treehouse TeacherHi Grace! When I fork your workspace, it does indeed show the pictures in 2 columns when pulled below 480px. I'm wondering if you might be looking at this on Safari on a Mac. If so, you will need to open up the developer tools by clicking "Develop" on the menu bar at the top and then "Enter responsive mode". I don't believe Safari will let you pull down the size of the browser below 480px. And this might be giving you the impression that it's not working. To exit Responsive mode, simply reverse the procedure.
Hope this helps!
Grace Ji
5,402 PointsThank you Jennifer! You are right. I am using Safari on a Mac. :) Where is "Develop" button? Which menu bar?
Thank you again!
Jennifer Nordell
Treehouse TeacherWhen you have Safari open up at the very top of the screen there should be a bar (you may need to take Safari out of full screen for this) that has a menu beginning with an Apple symbol and with others such as File, Edit, View, History and bookmarks. On that same bar you will find one named Develop.
Also, it's not a button. It should be black text on a thin bar at the extreme top of the screen.
Grace Ji
5,402 PointsThank you so much! You saved my life! haha.
Grace Ji
5,402 PointsI just tested my site with browserstack.com.
on the browserstack.com, my site works right responsively.
It is odd.
because on my workspace preview, my site is not responsive. hmmm...
Jason Anello
Courses Plus Student 94,610 PointsI'm looking into it now.
To be clear, you're not trying to do anything different from the course right?
Jason Anello
Courses Plus Student 94,610 PointsI'm seeing the expected behavior.
Below 480px, the gallery is 2 columns and the contact page is 1 column.
How are you testing? You're shrinking the browser window down below 480px and the gallery is staying stuck at 3 columns?
Grace Ji
5,402 PointsI made a same coding aside from font-types and background colors. :)
Jason Anello
Courses Plus Student 94,610 PointsThat's ok and wouldn't affect the responsiveness.
stjarnan
Front End Web Development Techdegree Graduate 56,488 Pointsstjarnan
Front End Web Development Techdegree Graduate 56,488 PointsHi Grace!
Could you please provide me with your code? That way I might be able to help you,