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

Ryan Duncan
Ryan Duncan
7,146 Points
Posted by Ryan Duncan
Ryan Duncan
7,146 Points

How do I get my text to adjust when the browser is minimized?

I really have two questions... First... When I minimize my browser for mobile viewing, the text does not wrap around with the browser minimization. It simply stays the same and adds a scroll bar at the bottom of the page. How do I change that.

Second.. Marc Sanchez was a hero and helped me with my header by creating it an image. However, when minimizing the browser for mobile viewing, The image appropriately adjusts its size to show the entire image. This means the rest of my h1, h2 and nav elements are no longer on the image. Is there a way to make the image just zoom in yet keep the same width?

Ryan Duncan
Ryan Duncan
7,146 Points
Ryan Duncan
Ryan Duncan
7,146 Points

I have fixed one thing. I changed my #wrapper { width: 100%;} to max-width: 100%; I think I may be able to do the same thing on the header image, But that will have to wait till later because for some reason the header photo will not show up on the computer I am on right now.

5 Answers

Russell Sawyer
seal-mask
.a{fill-rule:evenodd;}techdegree
Russell Sawyer
Front End Web Development Techdegree Student 15,705 Points
Russell Sawyer
.a{fill-rule:evenodd;}techdegree
Russell Sawyer
Front End Web Development Techdegree Student 15,705 Points

Hi Ryan,

You can put multiple elements inside a <div></div> tag and then control those elements together. Just add a class to the div and write CSS to control any element inside.

<div class="img-p">
  <img>
  <h1></h1>
  <p></p>
</div>
Carlos José
PLUS
Carlos José
Courses Plus Student 12,431 Points
Carlos José
Carlos José
Courses Plus Student 12,431 Points

With the META element you can add the actual browser width data in real time. It belongs inside of the HEAD element. And to use it set the content holders in a relative unit. As percentages, em or rem. Choose the best relative unit for any scenario.

Ryan Duncan
Ryan Duncan
7,146 Points
Ryan Duncan
Ryan Duncan
7,146 Points

Could you give me an example of what you mean? The only problem I am having now is my header image readjusts when making the browser smaller. My h1, h2, and nav elements stay the same and get pushed out of the image making them not only look terrible and off, but also invisible as they are white text.

Carlos José
Carlos José
Courses Plus Student 12,431 Points
Carlos José
Carlos José
Courses Plus Student 12,431 Points

This is a good reference when an element is mentioned Meta Tag - W3 Schools

You need to tell the Browser to access the Viewport's Width. That code is even in this page. It is what makes the Treehouse page adjust when you scale down the application window.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
Ryan Duncan
Ryan Duncan
7,146 Points
Ryan Duncan
Ryan Duncan
7,146 Points

That didn't help. It is still doing the same issue Screen shot when the browser is how I want it to look and what happens when you change the size of the browser

I had to highlight the nav text for it to be visible.

Ryan Duncan
Ryan Duncan
7,146 Points
Ryan Duncan
Ryan Duncan
7,146 Points 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ryan and Misty - Travelapolooza</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewports" content="width=content-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  </head>
  <body>
    <header>
        <a href="index.html" id="logo">
          <h1>Travelapolooza</h1>
          <h2>See-Experience-Live</h2>
        </a>
      <nav>
        <ul>
         <li><a href="index.html" class="selected">Home</a></li>
         <li><a href="trips.html" class="">Trips</a></li>
         <li><a href="about.html" class="">About</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
      </section>
      <footer>
        <p>&copy; Ryan Duncan</p>
      </footer>
    </div>
  </body>

</html>


```css

/*********************************
General
*********************************/

#wrapper {
 max-width: 940px;
 margin: 0 auto;
 padding: 0 5px;
}

a {
 text-decoration: none; 
}

img {
 max-width: 100%; 
}


/*********************************
Header
*********************************/


/** https://i.imgsafe.org/b4c85c3c88.jpg **/

header {
 background: url("https://i.imgsafe.org/b4c85c3c88.jpg"); 
 background-attachment: fixed;
 background-size: 100%;
 background-repeat: no-repeat;
 margin: 0 0 30px 0;
 padding: 20px 0 0 0;
 width: 100%;
 height: 250px;
}

#logo {
 text-align: center;
 text-decoration: none;
 color: #fff;
}

h1 {
  font-size: 2.75em;
  margin: 15px 0;
  line-height: 0.8em;
  font-weight: normal;
}

h2 {
 margin: 20px 0;
 font-size: 1em;
 font-weight: normal;
}


/*********************************
Navigation
*********************************/


nav {
 text-align: center;
 padding: 30px 0;
 margin: 50px 0;
}

nav ul {
 list-style: none;
 margin: 0 10px;
 padding: 0;
}

nav li {
 display: inline-block;
}

nav a {
 text-decoration: none; 
 color: #fff;
 font-size: 1.75em;
 margin: 0 20px 0 20px;
 padding: 30px auto;
}

nav a.selected {
 color: #c0dbff; 
}

nav a:hover {
 color: #c0dbff; 
}


/*********************************
Section
*********************************/

.index-photo {
 display: block;
 border-radius: 30%;
 max-width: 400px;
 max-height: 400px;
 margin: 5px auto;
}

/*********************************
Footer
*********************************/

footer {
 text-align: center; 
}

/*********************************
Page: About
*********************************/

/*********************************
Page: Trips
*********************************/

li {
 list-style: none; 
}

.colorado-gallery li {
 float: left;
 width: 20%;
 margin: 2%;
 display: block;
}

#colorado-p {
 color: #000;
}
Russell Sawyer
seal-mask
.a{fill-rule:evenodd;}techdegree
Russell Sawyer
Front End Web Development Techdegree Student 15,705 Points
Russell Sawyer
.a{fill-rule:evenodd;}techdegree
Russell Sawyer
Front End Web Development Techdegree Student 15,705 Points

In the section under header in your CSS where you have styling for your background image.

Change this line.

header {
  background-size: 100%;
}

To this line.

header {
  background-size: cover;
}

By changing the background-size to cover will make the image move in the window and you will need to figure out how to adjust the background image.

Treehouse does a great job explaining how to do this in the CSS Basics Course when Guil builds an entire website where he uses a background image in the header.

Good luck. :sparkles:

Ryan Duncan
Ryan Duncan
7,146 Points
Ryan Duncan
Ryan Duncan
7,146 Points

I changed viewports to viewport, but nothing really changed. I have tried cover but it zooms in really far and makes it look grainy and strange. The image itself is 1890px so I changed background-size to 1890px instead of 100% and that made it look a ton better but still kind of zooms in on a different part of the image. I think it looks a ton better right now though. I'll just have to keep working with it and learning I suppose.

Carlos José
Carlos José
Courses Plus Student 12,431 Points
Carlos José
Carlos José
Courses Plus Student 12,431 Points

Also try REM units instead in the meantime. EM units depend on Parent-Children relationships.