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

CSS

Posted by erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

My header border gets cutted off!

When i make my browser smaller, and move the scrollbar to the left this is what i see

http://imgur.com/5axEWoc

anyone have any idea what the problem is?

Rickey Paape
Rickey Paape
24,122 Points

You may want to create a media query for smaller screens making the font or image of your logo smaller so it won't overflow your header.

You can read more about media queries here.

You could also make the overflow of the container to hidden, but that would cut off your logo.

You can read more on overflow properties at W3Schools here.

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Thanks, i made a media querie for smaller devices and changed the logo size, and now the header does not cut off,

but i have another problem with the navigation links now, they are on top of the logo like this http://imgur.com/5hZhSf3

i tried to do position relative and move them down but that didnt work! any ideas?

Rickey Paape
Rickey Paape
24,122 Points

You should make the parent div's position relative and the nav's position absolute.

.main-header {
    position: relative;
}

.main-nav {
    position: absolute;
    bottom: 25px;
    right: 25px;
}

The relative position of .main-header makes all of the elements' positions within .main-header relative to .main-header. So when we assign the absolute position for .main-nav and say bottom: 25px, we are saying move up from the bottom edge of .main-header 25px. Same with the right, we move 25px left from the right edge of .main-header.

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

i did exactly as you said

i put the position of the header to relative

and the nav with the links to absolute and the bottom and right 25px

but it doesnt move, its still the same problem!

Rickey Paape
Rickey Paape
24,122 Points

You may have to change to height of your header div or the position of your logo.

Without seeing the HTML and CSS it's hard to say

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Heres the HTML 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" href="css/normalize.css" type="text/css">
  <link rel="stylesheet" href="css/responsive.css" type="text/css"
  <link href='http://fonts.googleapis.com/css?family=Josefin+Sans:700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/style.css" type="text/css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Erdrag Official Website</title>
</head>
<body>
    <header class="main-header">
      <img class="intro-pic" src="img/mainlogo.png" alt="logo">

      <div id="nav">
        <ul>
          <li><a href="work.html">Work</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </div>
    </header>

and heres the CSS 

@media screen and (max-width: 400px) {

    .intro-pic {
        position:relative;
        left: 5px;
        width: 70%;
        margin: 0 auto;
    }

     .main-header {
        position:relative;
        height: 100px;
     }


    #nav {
       white-space: nowrap;
       position: absolute;
       bottom: 25px;
       right: 25px;
    }

}
Rickey Paape
Rickey Paape
24,122 Points

Try this, change the values until you get what you are looking for. This should put the nav below your logo but you will have to play with the values to get the correct feel.

@media screen and (max-width: 400px) {

    .intro-pic {
        position:absolute;
        top: 10px;
        width: 70%;
        margin: 0 auto;
    }

     .main-header {
        position:relative;
        height: 150px;
     }


    #nav {
       white-space: nowrap;
       position: absolute;
       bottom: 10px;
       margin: 0 auto;
    }

}
erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Hey i tried the code, but now the links are invisible, so whenever i size down they disapear

// Erdrag

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

you have any idea what i can do, to fix this?

Rickey Paape
Rickey Paape
24,122 Points

Honestly, I would start writing the CSS over again, but this time take a mobile first approach. Get the layout to your liking for the smallest screen and then work your way up to the more complex code.

A good place to learn what you need is in the CSS Layout Techniques. But make sure you have completed the CSS Foundations Course so you don't get lost.