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 trialRyan Duncan
7,146 PointsHow 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?
5 Answers
Russell Sawyer
Front End Web Development Techdegree Student 15,705 PointsIf you post the HTML and CSS of your site that would help in finding a solution.
Russell Sawyer
Front End Web Development Techdegree Student 15,705 PointsHi 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é
Courses Plus Student 12,431 PointsWith 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
7,146 PointsCould 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é
Courses Plus Student 12,431 PointsThis 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
7,146 PointsThat didn't help. It is still doing the same issue
I had to highlight the nav text for it to be visible.
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>© 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;
}
Carlos José
Courses Plus Student 12,431 PointsTypo in Viewport, Not Viewports
Russell Sawyer
Front End Web Development Techdegree Student 15,705 PointsIn 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.
Ryan Duncan
7,146 PointsI 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é
Courses Plus Student 12,431 PointsAlso try REM units instead in the meantime. EM units depend on Parent-Children relationships.
Ryan Duncan
7,146 PointsRyan Duncan
7,146 PointsI 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.