Header elements do not react as expected when screen size is transitioned from desktop to mobile - please advise!

Question

Hello everyone,
When I transition my display from desktop to mobile, the elements such as the 'portfolio', 'about', and 'contact' do not stay in a line, and transition to being underneath the header elements - instead, they sort of squash up into two lines, one under the other on the right of the page, similarly to how they do for a brief moment in the video, when Nick is transitioning his screen from desktop to mobile, although, while his screen does it for a moment before they all transition to below the headers on his website, my elements just stay 'squashed up' on the right hand side of the page.
Also, I've noticed that because of this, I also don't get the dark green nav section below, as Nick's does, towards then end of the video.
Any ideas why this could be happening?
Many Thanks!
Henry

Henry Brenton · Answer

Hello Joel,  I'll have a look into that, I'm not sure that I made any changes to the source code, but I'll investigate that to be sure - just to confirm (I know it's a newbie question), whereabouts would the source code to the video be?
Thanks!
Henry

Henry Brenton · Answer

Hello Joel, here is my 'responsive.css' code:
"@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;
  }
  /*********************
  PAGE: ABOUT
  **********************/
  .profile-photo {
    float: left;
    margin: 0 5% 80px 0;
  }
}
@media screen and (min-width: 660px) {
  /*********************
  HEADER STYLING
  **********************/ 
 nav {
    background: none;
    float: right;
    font-size: 1.125em;
    margin-right: 5px;
    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 #9f009f;
  margin-bottom: 60px;
}"
And this is my 'main.css' code:
"/*********************
  WEBSITE BODY COLOUR
**********************/
body {
  background-color: #f92f3f;
}
/********************
  GENERAL STYLING
*********************/
body {
  font-family: Rubik, sans-serif;
}
a {
  text-decoration: none;
}
wrapper {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 5%;
  background: #e97e5f;
}
img {
  max-width: 100%;
}
h3 {
  margin: 0 0 1em 0;
}
/********************
  HEADER STYLING
*********************/
header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}
logo{
  text-align: center;
  margin: 0;
}
h1 {
  font-family: 'Cookie', sans-serif;
  margin: 25px 0;
  font-size: 2.7em;
  font-weight: bold;
  line-height: 0.8em;
}
h2 {
  font-family: 'Montserrat', sans-serif;
  margin: -7px 0 0;
  font-size: 0.8em;
  font-weight: normal;
}
/*************************
  NAVIGATION STYLING
*************************/
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: bold;
  padding: 15px 10px;
}
/**************************
 NAVIGATION COLOUR STYLING
**************************/
a {
  color: #45f4ee;
}
header {
  background: #3587ff;
  border-color: #83f993;
}
h1, h2 {
  color: #f1f1f9;
}
nav {
  background: #3587ff;
}
nav a, nav a:visited {
 color: #efa1de;
}
nav a.selected, nav a:hover {
  color: #43f599;
}
/********************
 FOOTER STYLING
*********************/
footer {
  font-size: 0.87em;
  text-align: center;
  clear: both;
  padding: 73px;
  color: #98c3d1;
}
.social-icon {
  width: 29px;
  height: 29px;
  margin: 7px 11px;
}
/**********************
PAGE: PORTFOLIO STYLING
***********************/
gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}
gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #c799b5;
}
gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.97em;
  color: #751159;
}
/********************
 PAGE: ABOUT STYLING
********************/
.profile-photo{
  display: block;
  max-width: 200px;
  margin: 0 auto 30px;
  border-radius: 100%;
}
/**********************
PAGE: CONTACT STYLING
***********************/
.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 1.4em;
}
.contact-info a {
  display: block;
  min-height: 23px;
  background-repeat: no-repeat;
  background-size: 29px 29px;
  padding: 0 0 0 31px;
  margin: 0 0 19px;
}
.contact-info li.phone a {
  background-image: url('../img/phone.png');
} 
.contact-info li.mail a {
  background-image: url('../img/mail.png');
} 
.contact-info li.twitter a {
  background-image: url('../img/twitter.png');
} 
/********************
 WEBSITE BODY STYLING
*********************/
body {
  background-color: #f92f3f;
  color: #43f599;
}"
Apologies if that's difficult to read - many thanks!
Henry

Welcome to the Treehouse Community

Looking to learn something new?

Henry Brenton

Henry Brenton

Header elements do not react as expected when screen size is transitioned from desktop to mobile - please advise!

joelmneskld

joelmneskld

2 Answers

Henry Brenton

Henry Brenton

logo{

wrapper {

logo{

gallery {

gallery li {

gallery li a p {

joelmneskld

joelmneskld

Henry Brenton

Henry Brenton

joelmneskld

joelmneskld