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

HTML How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Silvijo Cvjeticanin
Silvijo Cvjeticanin
3,288 Points
Posted by Silvijo Cvjeticanin
Silvijo Cvjeticanin
3,288 Points

Nothing works properly

When I resize my browser to mobile view nothing works properly - nav elements are in the column,not in line; in page about text float bellow profile photo; no way to get border in header etc..Can somebody please help? Here is my 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;} ovo inace treba biti vidljivo ali meni radi bez greske ****/

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

.profile-photo {float: left; margin:0 5% 80px 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; }

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

here is css: /********************************** GENERAL ***********************************/

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

sec {

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

a { text-decoration: none; }

img { max-width: 100%; }

h4 { 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-size: 0.75em; 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: 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: 150px; margin: 0 auto 30px; border-radius: 50px; }

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

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

}

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

}

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

/********************************** 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 link */ nav a, nav a:visited { color: #fff; }

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

here is index: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Silvijo Cvjeticanin FED</title> <link rel="stylesheet" href="glav.css/css.normalize.css"> <link href="https://fonts.googleapis.com/css?family=Barrio|Open+Sans+Condensed:300" rel="stylesheet"> <link rel="stylesheet" href="glav.css/moj.css"> <link rel="stylesheet" href="glav.css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>

<body> <header> <a href="index.html" id="logo"> <h1>Silvijo Cvjeticanin</h1> <h2>Front end Developer</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="sec"><section>
 <ul id="gallery">
  <li>
    <a href="img/numbers-01.jpg">
        <img src="img/numbers-01.jpg" alt="mali cuko">
        <p>This is a number 1</p></a>

   </li>
   <li>
    <a href="img/numbers-02.jpg">
        <img src="img/numbers-02.jpg" alt="veliki cuko">
        <p>This is a number 2</p>
      </a>
   </li>
   <li>
    <a href="img/numbers-06.jpg">
        <img src="img/numbers-06.jpg" alt="capture cuko">
        <p>This is a number 6</p>
      </a>
   </li>
   <li>
    <a href="img/numbers-09.jpg">
        <img src="img/numbers-09.jpg" alt="medic cuko">
        <p>This is a number 9</p>
      </a>
   </li>
   <li>
    <a href="img/numbers-12.jpg">
        <img src="img/numbers-12.jpg" alt="stubisni cuko">
        <p>This is a number 12</p>
      </a>
   </li>
   </ul>
   </section>
<footer>
  <a href="http://zooplus.hr"><img src="img/facebook.png" class="social-icon"></a>
  <a href="http://twitter.com"><img src="img/twitter.png" class="social-icon"></a>
  <p>&copy; 2017 Silvijo Cvjeticanin.</p>   
</footer> </div>

</body>

</html>

2 Answers

Josué Rodriguez
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Josué Rodriguez
Front End Web Development Techdegree Graduate 24,118 Points
Josué Rodriguez
.a{fill-rule:evenodd;}techdegree seal-36
Josué Rodriguez
Front End Web Development Techdegree Graduate 24,118 Points

Hi

At first glance it seems you haven't put anything inside the @media rules.

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

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

Anything you want modified when you resize the browser screen should be inside the @media like this:

@media screen and (min-width: 660px) {
  h1 {font-size: 1.5em;}
}
Silvijo Cvjeticanin
Silvijo Cvjeticanin
3,288 Points
Silvijo Cvjeticanin
Silvijo Cvjeticanin
3,288 Points

Hi Josue and thank you very much..Now site works like it should be..It was really beginners fault,you saved me tons of time..