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

George S-T
George S-T
6,624 Points
Posted by George S-T
George S-T
6,624 Points

Questions about my website.

Hey! Here is my site link: http://web.ehwscevf9q.treehouse-app.com/files/

What I can't understand how to do: Make the logo and heading stay with each other and fit correctly all the way until they completely fill the page width (which is when of course the media queries are needed, around iPhone width).

Basically, I need the logo and heading to fit when the screen is resized.

As you can see, Im obviously struggling to explain a simple thing! Thanks for any help!

5 Answers

Sonya K. Bailey
Sonya K. Bailey
18,108 Points
Sonya K. Bailey
Sonya K. Bailey
18,108 Points

I believe it's due to the absolute positioning. Absolute positioned items are taken out of the flow of the document and other items are free to flow right over them. It might be helpful to float: left your logo and h1 instead of absolute positioning. To get them exactly where you want them on the page, you can put them both in a div that acts as a container and absolutely position the div. Then they won't overlap each other when the screen is reduced.

Jeff Busch
Jeff Busch
19,287 Points
Jeff Busch
Jeff Busch
19,287 Points

Hi George,

Maybe you can play with these.

Jeff

<div id="cont1">
          <ul class="items">
      <li><a href="#cont2">About</a></li>
      <li><a href="#cont3">My Work</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>

    <div id="logo1">
      <img class="logo" src="img/Logo.png" alt="logo">
    </div>

    <div id="george">
      <h1>Hi. I'm George Symes-Thompson, Front-End Web Developer.</h1>
    </div>
      <img class="arrow" src="img/arrow.png">
    </div>
    <div id="cont2"></div>
    <div id="cont3"></div>
    <div id="contact"></div>

body {
  font-family: Roboto, sans-serif;
  font-size:14px;
  color:white;
}

a {
  font-size: 20px;
  text-decoration: none;
  color:white;
  margin-right:30px;
}

.items li {
  list-style-type:none;
  display:inline;
}

.items {
  text-align:right;
  padding-right:50px;
}

#cont1 {
  background-color:#308DCC;
  box-shadow: 0 0 200px rgba(0,0,0,.3) inset;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}

#cont2 {
  background-color:#42C24E;
  box-shadow: 0 0 200px rgba(0,0,0,.3) inset;
  width:100%;
  height:100%;
  position:absolute;
  top:100%;
  left:0;
}

#cont3 {
  background-color:#E74C3C;
  box-shadow: 0 0 200px rgba(0,0,0,.3) inset;
  width:100%;
  height:100%;
  position:absolute;
  top:200%;
  left:0;
}

#contact {
  background-color:#5b5b5b;
  box-shadow: 0 0 200px rgba(0,0,0,.3) inset;
  width:100%;
  height:25%;
  position:absolute;
  top:300%;
  left:0;
}

h1 {
  width:350px;
  /*position: absolute;*/
  text-align:center;
  font-size:35px;
  top:30%;
  left:50%;
}

.logo {
  width:300px;
  /*position:absolute;*/
  left:25%;
  top:25%;
}

.arrow {
  position:absolute;
  top:80%;
/*  left:50%;*/
  text-align:center;
}

#logo1 {
  float: left;
  margin-left: 25%;
}

#george {
  float: left;
  margin-top: 2.5%
}

@media screen and (max-width: 900px) {
  #george {
    margin-left: 25%;
  }
}
George S-T
George S-T
6,624 Points
George S-T
George S-T
6,624 Points

Thanks for this Jeff, Id actually just figured it out about 15 minutes ago! Cheers.

Jeff Busch
Jeff Busch
19,287 Points

I forgot about the arrow. How did you fix it? If it is too difficult to explain just post the code.

Ricardo Hill-Henry
Ricardo Hill-Henry
38,442 Points
Ricardo Hill-Henry
Ricardo Hill-Henry
38,442 Points

That's when you use percentages and ems to adjust the size of the font and/or image in response to the viewport size. You may want to set a min-height, and min-width on your image though, that way it doesn't get too small (but it's not needed). I'm not too sure what it is you're trying to do honestly, so this is the best I can give with what I I gathered.

George S-T
George S-T
6,624 Points
George S-T
George S-T
6,624 Points

Im so bad at explaining. Let me try again.

Open my website and re-size the window to make the width smaller. As you can see, the text eventually overlaps the logo.

I need to make it so that, when re-sizing, the text and logo move with the same speed, so that the text never overlaps the logo.

I hope thats a little clearer.

Kang-Kyu Lee
Kang-Kyu Lee
52,045 Points
Kang-Kyu Lee
Kang-Kyu Lee
52,045 Points 
.logo {
    width: 300px;
    position: absolute;
    left: 25%;
    top: 25%;
}

h1 {
    width: 350px;
    position: absolute;
    text-align: center;
    font-size: 35px;
    top: 30%;
    left: 50%;
}
George S-T
George S-T
6,624 Points
George S-T
George S-T
6,624 Points

This is just my code...

Kang-Kyu Lee
Kang-Kyu Lee
52,045 Points
Kang-Kyu Lee
Kang-Kyu Lee
52,045 Points

Sorry - Maybe, div, container, display, inline-block would be...