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 CSS Layout Basics Positioning Page Content Positioning Elements Relative to Other Elements

Aakash Srivastav
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points

Absolute 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

It 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
Steven Parker
230,274 Points

It'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
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points

But 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
Steven Parker
230,274 Points

You could use screen-relative units or a media query to insure that everything fits on smaller screens.