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

Elements are moving outside of container in HTML/CSS — javascript?

Site: kgshowroom.com/test

I have a looping video header that I implemented using a snippet of code I found. I overlaid text and a button on top of it. It looks alright until I get to a certain break point, and then the text and button move outside of the video container.

I tried putting into the div that I thought the video was in, but it just removed the text and button from view altogether.

I'd like to get the coral-colored "Hello" button and text that says "KG Showroom You're on our site" to stay within the video container.

It might be the javascript code, but I can't locate where I need to make changes. I've tried tweaking this code:

(Video Container?)

<div class="header-video"> <img src="img/masthead.jpg" class="header-video--media" data-video-src="0CxWLQxvY9g" data-teaser-source="video/masthead-teaser" data-provider="Youtube" data-video-width="500" data-video-height="281"> <a href="http://vimeo.com/87701971">

</div>

(Text and Button Section?)

<div id="header"> <!-- Inner --> <div class="inner" style="position: relative; z-index: 999; top: 0px; width: 50%; margin: 0 auto; text-align: center;"> <header> <h1> <a href="index.html" id="logo"><img src="images/KG-logo.png"><br />KG Showroom</a></h1> <p>You're on our site.</p> </header>

      <footer>
        <a href="#banner" class="button circled scrolly">Hello!</a>
      </footer>

    </div>

I tried moving the "Text and Button Section" into the place above the closing div tag in the "Video Container" but it just made the Text and Button disappear.

Anyone know where I am going wrong on this? I want it to stay overlaid and centered on the video on all breakpoints, no matter the size of the screen. If it's in the javascript code (which I didn't include here — not sure if it can be grabbed via the site's development tools, or if I should include the whole script.js code here), where should I be looking in order to change it?

Or do I need to just mess with the media queries in CSS?

Thanks!

1 Answer

This sounds like you need to create an set of media queries. Set a media query at the first breakpoint where your are have issues, then style the button inside the media query. after that you should be good to go. Also use the inspect element to sight test width and position of the button. it helps.