My index.html page stays in a Three column layout when I resize it.

Question

I'm doing the exercises How to Build a Website, and I'm up to the part where we build a Three column layout. In the portfolio page of my website. When I clear left in my gallery with the :nth-child, it fixes a minor problem with the layout and the text within the child. But that's it. When I resize it to a mobile size, it makes the gallery smaller like it should, but it stays in a three column grid. All my queries are in place. How do I make it into a one column layout, or two for tablet layouts?

Answer 1 · 2015-01-30T01:42:46Z

January 30, 2015 1:42am

If you are taking a mobile first approach, you can use your media queries to target sizes for tablets and screens.

Use your non-media queried styles to create a one column layout, then override some of those styles with a media query for tablets to create a two column layout, and then again for screens to create a three column layout.

Your approach to creating multiple columns is up to you, but some of the lessons later on in this course should give you some ideas.

Answer 2 · 2015-01-30T18:28:05Z

January 30, 2015 6:28pm

Yes, I fixed their is more to the second media queries. It probably didn't get copied when I sent it to you. It looks like this.

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

}

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

}

logo {

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

h1 { font-size: 0.825em; margin-bottom: 20px; }

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

}

I got rid of that coma in the main.css and that stray bracket in the responsive.css.

Answer 3 · 2015-01-30T21:05:27Z

January 30, 2015 9:05pm

With codepen it only lets me put the html and css on two windows. I can't seem to find how to place my other html their to check it. For markdown, how can I make my code readable? I want to place it inside a black background with colored readable code like you have. The three ticks don't work too well for me.

I have fixed most of my website but only a few minor things like when I resize my browser to view the website in a mobile layout it shrinks my header. I can't figure out a way to fix this.

By the way thank you for your support. I have fixed many problems because of your help.

Answer 4 · 2015-01-30T22:42:36Z

January 30, 2015 10:42pm

I actually still have column layout problems. The text in my gallery in my index.html doesn't shrink with the rest of the layout. It stays one size making the layout pretty awkward. The only thing I solved was making the columns correspond. Not the content so much. And my heading logo acts real abnormal when I resize the website to a mobile size screen. It actually shrinks dramatically.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Otto Mejia | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,
700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>  
      <a href="index.html" id="logo">
        <h1>Otto Mejia</h1> 
        <h2>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/number-01.jpg">
            <img src="img/numbers-01.jpg" alt="">
            <p>Experimentation with color and texture.</p>
          </a>
        </li>
        <li>
          <a href="img/number-02.jpg">
            <img src="img/numbers-02.jpg" alt="">
            <p>Playing with blending modes in Photoshop.</p>
          </a>
        </li>
        <li>
          <a href="img/number-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/number-09.jpg">
            <img src="img/numbers-09.jpg" alt="">
            <p>Drips created using Photoshop brushes.</p>
          </a>
        </li>
        <li>
          <a href="img/number-12.jpg">
            <img src="img/numbers-12.jpg" alt="">
             <p>Creating shapes using repitition.</p>
              </a>
            </li>
          </ul>
        </section> 
        <footer>
            <a href="https://twitter.com/Otto__me" target="_blank">
            <img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a>
            <a href="http://ottosportfolio.squarespace.com" target="_blank">
            <img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a>
        <p>&copy; 2015 Otto Mejia</p>
       </footer>
      </div>
    </body>
</html>

Here's my codepen version. I only put my html and my css. not the others. Hope I'm doing this right.

http://codepen.io/ottome95/pen/XJawVg?editors=110

Answer 5 · 2015-01-30T23:27:14Z

January 30, 2015 11:27pm

It looks like you've declared the font-size of your #gallery li a p elements in your base styles too big. Two quick fixes come to mind:

Fix No. 1 (recommended)

In your base styles, change the font-size to something more reasonable for a mobile device. Then, in your media queries add additional styles to optimize the experience on larger devices.

You could change your initial style to this:

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 1em; /* Use to be 1.75em */
  color: #949494;
}

And add to an existing media query or create a new one later on with this:

@media (min-width: 768px) { /* only on devices 768px wide or bigger */
  #gallery li a p { /* select your paragraph elements in your gallery at the same specificity they were selected earlier */
    font-size: 1.75em; /* size up to your original settings */
  }
}

This approach is recommended because it follows the mobile first approach.

Fix No.2 (not recommended)

Use a media query to scale the font-size smaller on small devices.

@media (max-width: 768px) { /* only on devices smaller than 768px wide */
  #gallery li a p { /* select your paragraph elements in your gallery at the same specificity they were selected earlier */
    font-size: 1em; /* size 'em down to 1em */
  }
}

Answer 6 · 2015-01-31T00:03:24Z

January 31, 2015 12:03am

Ok, thank you so much. I'll try these out to see how it comes out. I have most of my website done thanks to you. Sorry for constantly asking questions, but I'm new to this. I want to get a job as a web developer. How likely is one to find a job in this field?

Answer 7 · 2015-01-31T22:02:42Z

January 31, 2015 10:02pm

Thanks for your help again. How likely is one to find a decent job through treehouse? I know treehouse takes 6 months to a year to learn, but how well does it really help you find a job. Did you find your current job through the website?

Answer 8 · 2015-01-31T23:20:37Z

January 31, 2015 11:20pm

doing either is a viable option. But did you start your career through a school or other program?

Welcome to the Treehouse Community

Looking to learn something new?

Otto Mejia

Otto Mejia

My index.html page stays in a Three column layout when I resize it.

8 Answers

Jeff Jacobson-Swartfager

Jeff Jacobson-Swartfager

Otto Mejia

Otto Mejia

Jeff Jacobson-Swartfager

Jeff Jacobson-Swartfager

Otto Mejia

Otto Mejia

wrapper{

logo {

gallery {

gallery li {

gallery li a p {

gallery li {

gallery li:nth-child(4n) {

Jeff Jacobson-Swartfager

Jeff Jacobson-Swartfager

Otto Mejia

Otto Mejia

logo {

Otto Mejia

Otto Mejia

Jeff Jacobson-Swartfager

Jeff Jacobson-Swartfager

Otto Mejia

Otto Mejia

Jeff Jacobson-Swartfager

Jeff Jacobson-Swartfager

Otto Mejia

Otto Mejia

Jeff Jacobson-Swartfager

Jeff Jacobson-Swartfager

Fix No. 1 (recommended)

Fix No.2 (not recommended)

Otto Mejia

Otto Mejia

Jeff Jacobson-Swartfager

Jeff Jacobson-Swartfager

Otto Mejia

Otto Mejia

Jeff Jacobson-Swartfager

Jeff Jacobson-Swartfager

Otto Mejia

Otto Mejia