Why my 2 sections are not stacking up when window's width is less 480px?

Question

Can anyone explain why my 2 sections are staying as 2 columns when I resize the window to less than 480px? It only change into 1 column when the windows is very narrow, and text from 2 columns is starting to overlap, not like in the video

Answer 1 · 2017-02-16T15:39:40Z

February 16, 2017 3:39pm

Which portion of code would you like me to paste? Whole main.css? And what is the best way of pasting code on this forum? Sorry, I'm still quite new to asking questions on Treehouse forum.

Answer 2 · 2017-02-16T15:55:20Z

February 16, 2017 3:55pm

<!DOCTYPE html>
<html>  
  <head>
    <meta charset="utf8">
    <title>Wojciu|Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans" 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>Wojciu</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" class="selected">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>Experimantation with color and texture</p>
        </a>
        <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 using repetition</p>
        </a>
        </li>

      </ul>
    </section>
    <footer>
      <a href="http://facebook.com/"><img src="img/facebook-wrap.png" alt="Twitter Logo" class="social-icon"></a>
      <a href="http://twitter.com/"><img src="img/twitter-wrap.png" alt="Facebook Logo" class="social-icon"></a>
      &copy; 2016 Wojciu
    </footer>
      </div>
  </body>

</html>

Answer 3 · 2017-02-16T15:56:16Z

February 16, 2017 3:56pm

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

body {
  font-family: 'Open Sans', sans-serif;
}


#wrapper {
  max-width: 940px;
  margin: 0 200px;
  padding: 0 5%;
}

a {
  text-decoration: none
}

img {
  max-width: 100%;
}

h3 {
  margin: 0 0 1em 0;
}

/************************************************
HEADING
*************************************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

/************************************************
NAVIGATION
*************************************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}

/************************************************
FOOTER
*************************************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}

/************************************************
PAGE: PORTFOLIO
*************************************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}

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

.profile-photo {
  display: block;
  max-width: 350px;
  margin: 0 auto 30px;
  border-radius: 30px;
}

/************************************************
PAGE: CONTACT
*************************************************/

.contact-info {
  list-style: none;
  padding:0;
  margin: 0;
  font-size; 0.9em;
}

.contact-info li.phone a {
  background-image: url('../img/phone.png');
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}


.contact-info li.mail a {
  background-image: url('../img/mail.png');
}

.contact-info li.twitter a {
  background-image: url('../img/twitter.png');
}

/************************************************
COLORS
*************************************************/

/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* green header*/
header{
  background: #6ab47b;
  border-color: #599a68;
}

/* nav background on mobile */
nav {
  background: #599a68;
}

/* logo text */
h1, h2 {
 color: #fff; 
}

/* links */
a {
  color: #6ab47b;
}


/* nav links */
nav a {
  color: #fff;
}

/* selected nav links */
nav a.selected, nav a:hover {
  color: #32673f;
}

Answer 4 · 2017-02-16T16:10:37Z

February 16, 2017 4:10pm

First of all in your index.html this is what you did:

 <footer>
      <a href="http://facebook.com/"><img src="img/facebook-wrap.png" alt="Twitter Logo" class="social-icon"></a>
      <a href="http://twitter.com/"><img src="img/twitter-wrap.png" alt="Facebook Logo" class="social-icon"></a>
      &copy; 2016 Wojciu
    </footer>
      </div>

But it is supposed to be like this:

 <footer>
      <a href="http://facebook.com/"><img src="img/facebook-wrap.png" alt="Twitter Logo" class="social-icon"></a>
      <a href="http://twitter.com/"><img src="img/twitter-wrap.png" alt="Facebook Logo" class="social-icon"></a>
      <p>&copy; 2016 Wojciu</p>
    </footer>
      </div>

This might not help but just fix your error.

Also show me your responsive.css

Answer 5 · 2017-02-16T16:16:32Z

February 16, 2017 4:16pm

Thx Dovie. I applied the paragraph that you recommended and meanwhile I found the solution for the column problem here: https://teamtreehouse.com/community/my-primary-and-secondary-columns-wont-become-one-column-when-i-make-the-window-smaller Alex Peters over 1 year ago "If you are using a big screen (iMac etc) might not be able to make the browser window small enough to mimic a 440px screen. I had this problem, changing the min-width for the first section of code to 660px will enable you to test it and prove the code with the browser you are using. Don forget to change it back to 480px!" Thank you for your time anyway!

Welcome to the Treehouse Community

Looking to learn something new?

Voyti 1

Voyti 1

Why my 2 sections are not stacking up when window's width is less 480px?

Dovie Kazinec

Dovie Kazinec

Dovie Kazinec

Dovie Kazinec

5 Answers

Voyti 1

Voyti 1

Voyti 1

Voyti 1

Voyti 1

Voyti 1

Dovie Kazinec

Dovie Kazinec

Dovie Kazinec

Dovie Kazinec

Voyti 1

Voyti 1