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

Header collapsing, when smaller browser

Hello my site header is collapsing when i rezise my browser, and its cut off like 3mm at desktop view

all my other elements on the page is fixed, so when rezising window you can scroll to the side and down.

but the header gets cut off in the middle, heres pictures off it

http://imgur.com/QqfcdGg and http://imgur.com/0TAsEh5

so you can see that the header background and image are getting cut off, and also the headers bottom border.

heres the css

body {
    background: url('../img/background.jpg');
    font-family: 'Oswald', sans-serif;
    color: #fff;
    width: 100%;
}

header {
  background-image: url('../img/texture-logo.png');
  background-color:black;
  background-size: 100%;
  padding: 40px;
  margin-bottom: 200px;
  min-height: 100%;  
}

header {
    border-bottom: 5px solid white;
}

.main-logo {
        width: 400px;
}

.main-wrapper {
    width: 1500px;
    margin: 0 auto;
    padding-left: 5%;
    padding-right: 5%;
}



.first-content img{
   width: 200px;
   height: 200px;
   border: 5px solid white;
   border-radius: 10px;
}

.first-content a:hover {
   opacity: .7;
}

.first-content li {
    float: left;
    width: 200px;
}

.first-content ul li{
    margin: 40px;
    list-style: none;
}

.first-content {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.first-content ul li p {
    letter-spacing: 2px;
}


.second-content p{
   color: #FFF;
}

.second-content {
    clear:both;
    width: 50%;
    text-align: center;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    border: 5px solid white;
    border-radius: 40px;
    margin-top: -80px;
    overflow: visible;
}



footer {
    clear:both;
    text-align: center;
    font-size: 20px;
    color: #FF6600;
    font-weight: 900;
}

footer {
    border-top: 1px solid white;
}







/***BUTTON FOR SECOND CONTENT****/


.button {
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 5px;
    border: 1px solid black;
    border-radius: 20px;
    background-color: #FF6600;
    text-align: center;
    margin-bottom: 2px;
}

.button {
    font-weight: bold;
}

.button:hover {
   background-color: #FF6633;
}

10 Answers

Kallil Belmonte
Kallil Belmonte
35,561 Points
Kallil Belmonte
Kallil Belmonte
35,561 Points

Adding a " margin: 0; " on the body doesn't help?

If don't, please provide your HTML too.

The website is fixed and not responsive, right?

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

No the margin did not work, and yeah the website is fixed.

heres the html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/normalize.css" type="text/css">
    <link rel="stylesheet" href="css/main.css" type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
<title>official site</title>
</head>
<body>
    <header class="main-header group">
        <img class="main-logo" src="img/logo.png">
    </header>
<div class="main-wrapper">

<section class="second-content">
<p>this is just some random text ive written because i dont know just ignore this 1 2 3 dont know what else to 
write goodbye</p>

<span class="button">E-Mail US!</span>
</section>



<section class="first-content col">
    <ul>
      <li>
        <a href="dust2.html"><img src="img/dust2.jpg" alt="Dust2"></a>
        <p>Dust 2</p>
      </li>
      <li>
        <a href="nuke.html"><img src="img/nuke.jpg" alt="Nuke"></a>
        <p>Nuke</p>
      </li>
      <li>
        <a href="aztec.html"><img src="img/aztec.jpg" alt="Aztec"></a>
        <p>Aztec</p>
      </li>
      <li>
        <a href="cache.html"><img src="img/cache.jpg" alt="Cache"></a>
        <p>Cache</p>
      </li>
      <li>
        <a href="mirage.html"><img src="img/mirage.jpg" alt="Mirage"></a>
        <p>Mirage</p>
      </li>
      <li>
        <a href="inferno.html"><img src="img/inferno.jpg" alt="Inferno"></a>
        <p>Inferno</p>
      </li>
      <li>
        <a href="cobblestone.html"><img src="img/cobblestone.jpg" alt="Cobblestone"></a>
        <p>Cobblestone</p>
      </li>
      <li>
        <a href="overpass.html"><img src="img/overpass.png" alt="Overpass"></a>
        <p>Overpass</p>
      </li>
      <li>
        <a href="train.html"><img src="img/train.jpg" alt="Train"></a>
        <p>Train</p>
      </li>
      <li>
        <a href="vertigo.html"><img src="img/vertigo.jpg" alt="Vertigo"></a>
        <p>Vertigo</p>
      </li>
    </ul>
</section>



<div class="push"></div>


<footer>
<p>&copy; 2015, Tobbe and Erdrag all right reserved</p>
</footer>

</div>
</body>
</html>
Kallil Belmonte
Kallil Belmonte
35,561 Points
Kallil Belmonte
Kallil Belmonte
35,561 Points

I'm limited because I haven't the images to see the real result, but I made a little modifications, try this:

body {
    background: url('../img/background.jpg');
    font-family: 'Oswald', sans-serif;
    color: #fff;
    margin: 0;
    width: 100%;
}

header {
  background-image: url('../img/texture-logo.png');
  background-color:black;
  background-size: 100%;
  padding: 40px;
  margin-bottom: 200px;
  min-height: 100%;  
  width: 1550px;
}

You also can make your own modifications in this code if it is right (or near).

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

yeah it works now when i rezise the browser, but when its in fullscreen (desktop size) the header gets cut off like 1 cm

Kallil Belmonte
Kallil Belmonte
35,561 Points
Kallil Belmonte
Kallil Belmonte
35,561 Points

I can't see this because my screen is smaller, but you can adjust only the header's size to fix this?

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

yeah but if i add like 1600px to the width, the header spans further away, and i get scrollbars at desktop screen, and if someone is looking at the website with a even larger screen, the border would get cut off,

isnt there a way to make the header stay the same width as the browser (span the whole width)?

Kallil Belmonte
Kallil Belmonte
35,561 Points
Kallil Belmonte
Kallil Belmonte
35,561 Points

I understand, but for what I've tested in your code, I would say that you has two options.

1-

Remove the .main-wrapper in you css and aply the following code at your header (change the height as you want):

header { 
  background-image: url('../img/texture-logo.png');
  background-color:black;
  background-size: 100%;
  height: 500px;
  margin-bottom: 200px;
  border-bottom: 5px solid white;
}

As you resize your screen you will see your images content to change it's position, like a responsive website.

Or 2-

Give a fixed header, with an ending width and height, to seem like a fixed menu at the center of the screen.

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

When i remove main wrapper, the images get wierd placements as my screen gets narrower, because it has no container with a set of width

Kallil Belmonte
Kallil Belmonte
35,561 Points
Kallil Belmonte
Kallil Belmonte
35,561 Points

Sorry, I missed this because the way that the page displays to me

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Heres a codepen of it! http://codepen.io/anon/pen/OPjrKa

Kallil Belmonte
Kallil Belmonte
35,561 Points
Kallil Belmonte
Kallil Belmonte
35,561 Points

So... in your case (fixed layout) I would do something like this: http://codepen.io/anon/pen/OPjGYB

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

yeah i see, its the same effect if you add the header in to the wrapper div, but i would like the header to span the full width, off the browser, because now it only spans the size of the window, so when i scroll to the right it get cut off

Kallil Belmonte
Kallil Belmonte
35,561 Points
Kallil Belmonte
Kallil Belmonte
35,561 Points

Your layout is Fixed, so your header is Fixed, it means that in some point it must end, that's why I made this last codepen, if you search for fixed layouts you will see this similarity.

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

so there isnt any way to make it span all the width of the page

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

heres and description of the problem (i wrote this in another thread)

the headers background is black, and i have an image in the header, that is supposed to be the logo, my website is fixed so when i rezise the browser all the things stay put except the header, at desktop view it has a small cut, and when i rezise it it span the browser size, but when i scroll to the right to see all the content on the page it has a cut, because it only was spaning the browser window at small screen, and not across the whole page that is fixed

Kallil Belmonte
Kallil Belmonte
35,561 Points
Kallil Belmonte
Kallil Belmonte
35,561 Points

If it is, I don't know yet, sorry.

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

oh okey, i have another issue with the wrapper div, the images are centered wrong in the div, i had the same problem on another site i've made and i fixed it by doing text-align center. but it does not work here.

heres a picture off the padding on the side of the wrapper div http://imgur.com/dV4ZobL

you can see that the left sides padding are wider, than the right side.

Kallil Belmonte
Kallil Belmonte
35,561 Points
Kallil Belmonte
Kallil Belmonte
35,561 Points

Hi,

Maybe you can set a less number to your margin at ".first-content ul li {}". Or create a ".first-content ul li:first-child {}" and set a margin-left with a negative number.

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

hey i made A noter thead about the div problem and fond the solution and it was identicall to your solution, and i also fixed the header, i made anoter div around it and gav it the full with of the page and now it work ed, thanks for taking your time help in me! I appreciate it