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

CSS

Posted by Halyna Buriachenko
Halyna Buriachenko
Courses Plus Student 1,868 Points

My layout doesn't go from 3 to 2 columns when I decrease my screen size. Responsive.css!

I checked my code and don't see any issues. But layout doesn't change;( Here is my index.html

<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>Halyna Buriachenko |Web-designer</title>
   <link rel="stylesheet" href="css/reset.css">
   <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Merriweather:700|Oxygen:700" rel="stylesheet">
   <link rel="stylesheet" href="css/main.css">
   <link rel="stylesheet" href="css/responsive.css">
  </head>
 <body>
    <header>
      <a href="index.html" id="logo">
       <h1>Halyna Buriachenko</h1>
       <h2>Web-designer</h2>
      </a>
     <nav>
      <ul>
        <li><a href="index.html" class="selected">Portfolio</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
     </nav>
    </header>
   <div id="wrapper">
    <section>
       <ul id="gallery">
        <li>
         <a href="img/numbers-01.jpg">
           <img src="img/numbers-01.jpg" alt"">
            <p>Experimentation with colors and texture.</p>
         </a>
        </li>
        <li>
         <a href="img/numbers-02.jpg">
           <img src="img/numbers-02.jpg" alt"">
            <p>Playing with blending modes in Photoshop.</p>
         </a>
        </li>
        <li>
         <a href="img/numbers-06.jpg">
          <img src="img/numbers-06.jpg" alt"">
           <p>Trying to create an 80's style of glows.</p>
         </a>
        </li>
        <li>
         <a href="img/numbers-09.jpg">
          <img src="img/numbers-09.jpg" alt"">
           <p>Drips created using photoshop brushes.</p>
         </a>
        </li>
        <li>
         <a href="img/numbers-12.jpg">
          <img src="img/numbers-12.jpg" alt"">
           <p>Creating shapes usind repetition.</p>
         </a>
        </li>
       </ul>
    </section>
    <footer>
      <a href="http://twitter.com/HeilySweet"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
      <a href="http://facebook.com/galina.buryachenko"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
      <p>&copy; 2017 Halyna Buriachenko.</p>
    </footer>
     </div>
 </body>
</html>

and here is responsive.css. 

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

  /********************************
  Two column layout
  ********************************/

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

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

  /********************************
  Page:Portfolio
  ********************************/
  #gallery li{
    width: 28.3333%;
  }
  #gallery li:nth-child(4n){
    clear:left;
  }

}

@media screen and (min-width:660px){
  h2{
    font-size:1.75em;
  }
}

1 Answer

Benjamin Larson
Benjamin Larson
34,055 Points

So yet again your code seems to work fine for me haha. Are you making your browser window narrow enough to see the change? Or will another restart magically fix this one too?

In cases where you aren't seeing changes take effect, are you refreshing the page (F5) or doing a complete reload (CTRL+F5)? Hitting the refresh button will normally be enough, but in some cases where you need to clear the browser cache and completely reload files from the server, try doing CTRL+F5 before you go through the annoyance of restarting your PC.

Halyna Buriachenko
Halyna Buriachenko
Courses Plus Student 1,868 Points

Lol. I restarted it a lot. It doesn't work. I am making it as narrow as I can. I even got a MacBook for easier work. Omg. Something is wrong but I don't know what exactly lol:(

Benjamin Larson
Benjamin Larson
34,055 Points

Halyna Buriachenko Hmm...did you make any changes in your main.css? I'm using the one you posted on your last question along with your new responsive.css works and it across 4 different browsers. Your main.css did have a couple small syntax errors that I doubt would cause a problem with this, but it may not hurt to run it through a CSS Validator to spot the extra semi-colons and commas. But yeah, CSS problems aren't usually this hard to replicate and debug lol

Benjamin Larson
Benjamin Larson
34,055 Points

Also, I don't know if you're using Workspaces or a local environment. Maybe try it in both? If it is in Workspaces, can you post a link to snapshot?

Halyna Buriachenko
Halyna Buriachenko
Courses Plus Student 1,868 Points

LOL! Omg I don't understand what is going on. It doesn't work on Mac but it works on my Windows laptop. Wow. I work in Workspace on Mac. Probably my browser on Mac has default of decreasing screen to minimum size which is not as small as it can be.:( Don't know how to change it lol. Thanks for the feedback;) http://port-80-8ymlc9qqwo.treehouse-app.com

Benjamin Larson
Benjamin Larson
34,055 Points

I did notice that if I have a bunch of browser tabs open that Chrome wouldn't allow me to make it narrow enough to see the changes but if I viewed it in its own window, then I could make it narrower. I use the Chrome extension called "Window Resizer" that allows you to see the Viewport and window size as you are changing the dimensions of the browser, so you can see exactly when you're hitting those breakpoints. There's probably something similar for other browsers if you don't use Chrome, and it can be very helpful when designing responsive layouts.