2 Column, Mobile Layout is Missing

Question

Hi there,

It appears that my browser window will not shrink below a width of 480px. I can no longer get the mobile layout to appear. I'm not sure how I managed to cause this to happen! Any help would be appreciated!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Cari Sekendur Design</title>
    <link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Changa+One:400,400italic|Open+Sans:400,300,600,700,800,300italic,400italic,700italic,600italic,800italic' 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>Cari Sekendur</h1>
        <h2>Design</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="image/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="image/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in photoshop.</p>
            </a>
          </li>
          <li>
            <a href="image/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create and 80's style of glows.</p>
            </a>
          </li>
          <li>
            <a href="image/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created using photoshop brushes.</p>
            </a>
          </li>
          <li>
            <a href="image/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repitition.</p>
            </a>
          </li> 
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/cskdr"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://twitter.com/cskdr"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2016 Cari Sekendur.</p>
      </footer>
    </div>  
  </body>
</html>

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

/***********************************
TWO COLUMN LAYOUT
************************************/
  #primary {
    width: 50%;
    float: left;
  }

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


/***********************************
CALCULATING MARGIN
3 * 5 = 15
100-15% = 85%
85%/3 = 28.3333333
************************************/

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

#gallery li {
  width: 28.3333%
}

#gallery li:nth-child(4n) {
  clear: left;
}

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

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




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

  /***********************************
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: 20px;
  }

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

}

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

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

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

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

h3 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  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;
}

h2 {
  font-family: 'Changa One', sans-serif;
  font-size: 1em;
  margin: -5px 0 0;
  font-weight: normal;
}

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

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

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

nav li {
  display: inline-block;
}

nav a {
  font-weight: 700;
  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: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}




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

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

.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')
}

.contact-info li.phone a {
  background-image: url('../img/phone.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;
}

/*link color*/
a {
  color:#6ab47b
}

/*nav link colors*/
nav a, nav a:visited {
  color: #fff;
}

/* selected nav link colors*/
nav a.selected, nav a:hover {
  color: #32673f
}

Answer 1 · 2016-07-24T19:12:09Z

July 24, 2016 7:12pm

as far as I understand, your problem is you don't know how to test your website layout on mobile screens

well, you don't have to shrink your browser for testing, there are many ways to do that. I find the best way is to open your html page on Chrome browser and then from the up-bar click on customize and control button >>> more tools >>> developer tools (a small window will pop-up) >>> click on the 'Toggle device toolbar button' (it appears with small a tablet and smartphone icon) >>> choose then the size of the device you want to test on or do it manually

Answer 2 · 2016-07-24T19:37:34Z

July 24, 2016 7:37pm

I am really sorry for that, OK first try to add the media query rules at the end of your CSS document and let me know if it works.

Answer 3 · 2016-07-25T17:01:11Z

July 25, 2016 5:01pm

all of them

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

}

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

}

put them and their contents at the end of the CSS document, while the common CSS rules between all screen sizes put them at the beginning i hope you understand what I mean.

Welcome to the Treehouse Community

Looking to learn something new?

Cari Sekendur

Cari Sekendur

2 Column, Mobile Layout is Missing

3 Answers

Faisal Julaidan

Faisal Julaidan

Cari Sekendur

Cari Sekendur

Faisal Julaidan

Faisal Julaidan

Cari Sekendur

Cari Sekendur

Faisal Julaidan

Faisal Julaidan