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 How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Jean-Emmanuel Jules
Jean-Emmanuel Jules
5,295 Points
Posted by Jean-Emmanuel Jules
Jean-Emmanuel Jules
5,295 Points

My gallery keeps 3 columns even when I reduce the browser to a mobile size

My gallery in the portfolio page transits nicely from a desktop size to a mobile size, however, it stays at 3 columns even when i reduce the browser to the smallest size. Does it have to do with the length of the captions?

4 Answers

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

Hey Jean-Emmanuel,

You have the proper CSS rules, except somehow a couple of them (vital to going to 2 columns) ended up outside of the Media Query (in the Responsive.css file). If you just move them up and back into the query, it all works nicely.

I've included the correct CSS snippet for you.

@media screen and (min-width: 480px) {

  /*****************************************
  GENERAL
  *****************************************/

  #primary {
    width: 50%;
    float: left;
  }

  #secondary {
    width: 40%;
    float: right;
  }

  #gallery li {
  width: 28.3333%;
}

  #gallery li:nth-child(3n + 1) {
  clear: left;
  }
}

Keep Coding! :) :dizzy:

Jean-Emmanuel Jules
Jean-Emmanuel Jules
5,295 Points
Jean-Emmanuel Jules
Jean-Emmanuel Jules
5,295 Points

Yes it works! Thank you so much, I'll make sure to look at my code more carefully now.

Mark Houston
Mark Houston
11,782 Points
Mark Houston
Mark Houston
11,782 Points

Can you provide a link or a copy of your code?

Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

Workspaces are private only to the user. To share your workspace, you will need to take a snapshot of it. Click the little camera icon in the top right of your workspace window and follow the prompts. This will generate a URL for the snapshot. Please note: sometimes, you will have to open the snapshot yourself and copy the URL from the address bar. Paste that URL back here and someone should be able to then help you troubleshoot.

:dizzy:

Mark Houston
Mark Houston
11,782 Points
Mark Houston
Mark Houston
11,782 Points

I'm getting 'Page doesn't exist' can you check the link or provide the code.

jessb
jessb
3,551 Points
jessb
jessb
3,551 Points

I don't know if this helps but i did finish the HTML course, and when I was done, my responsive CSS looked like this. Our codes begin to differ after line 33 on your responsive CSS.

gallery li {

width: 28.3333%; }

gallery li:nth-child(4n) {

clear: left; }

/***************** PAGE: ABOUT ******************/

.profile-photo { float: left; margin: 0 5% 80px 0; }

@media screen and (min-width: 660px) {

/***************** PAGE: HEADER ******************/

nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }

#logo { float: left; margin-left: 5%; text-align: left; width: 45%; }

h1 { font-size: 2.5em; }

h2 { font-size: 0.825em; margin-bottom: 28px; }

header { border-bottom: 5px solid #599a68; margin-botttom: 60px; }

}