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
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 PointsAbsolute Positioning
My html is----
<header>
<div class="container">
<h1 id="tag-line">Innovation Cloud</h1>
<h3 id="title">Connect Your Ideas Globally</h3>
<a href="#" class="btn">Learn More</a>
</div>
</header>
And my CSS is----
*,html{
margin: 0;
padding: 0;
}
body{
font-family:'Roboto',sans-serif;
}
/*--------Header-------*/
header{
background-image:url(http://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/bg.jpg);
height: 800px;
background-size: cover;
text-align: center;
color: #ffffff;
position: relative;
width: 100%;
}
header .container{
position: absolute;
top:15%;
width: 100%;
}
#tag-line{
text-transform: uppercase;
font-size: 6.5em;
}
I am using the Mobile First Approach , at the lowest width of viewport , my heading(#tagline) i,e Innovation Cloud goes out of the viewport width which result in horizontal scrollbar. But as I am increasing the size of the viewport , scrollbar get disappeared. What going on here? I am stuck here. Please help. Thank You.
3 Answers
Marc Sanchez
20,039 PointsIt looks like your font-site in #tag-line is way too big for a mobile device. Bring it down to 1.5em then increase or decrease as needed.
Steven Parker
231,275 PointsIt's normal for the horizontal scroll bar to vanish when you increase the size of the viewport enough to display all the contents.
Did you want the scroll bar to stay on the screen always? If so, you can add this to your "body" rule:
overflow-X: scroll;
And if you never want the scroll bar (and just cut things off on a small screen):
overflow-X: hidden;
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 PointsBut my heading got cut off when i use "overflow-X" . I want to display whole heading at small screen too. Is the solution of problem is to reduce the size of heading ("tag-line")?
Steven Parker
231,275 PointsYou could use screen-relative units or a media query to insure that everything fits on smaller screens.
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 PointsThanks got that :)