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

Posted by Daniel Creasey
Daniel Creasey
Courses Plus Student 2,161 Points

Scaling my page to when changing viewport.

Hi,

I have a small html page and which i have styled using css, normalise and grids.

I am trying to make it that when the viewport is minimised the heading, button and video all scale down as the view port is changed.

Here is the body of my html page. 

<body>

    <h1 class="grid_12" id="lemag">LeMagasin</h1>

    <div class="grid_12" id="btn">
        Enter LeMagasin
          </div>

<div class="grid_12" id="video">
    <iframe src="http://player.vimeo.com/video/65799785?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff&amp;autoplay=1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

Also... I have a background which covers my page. I would like this to scale down as the viewport is altered. I have changed the background my setting an ID to the html and then styled the background in css.

Here is the css for the page background 

.welcomepage {
    height: 100%;
    background: url('img/front_of_shop.jpg') no-repeat center;
    background-width: contain;}

Any help would be much appreciated . Your help within these forums is also so beneficial to me!!!!

Dan

3 Answers

Jeff Busch
Jeff Busch
19,287 Points
Jeff Busch
Jeff Busch
19,287 Points

Hi Daniel,

In your css you are selecting class .welcome but nothing in your html seems to have a class="welcome". The answer to your problem should be found in the Build a Responsive Website track.

Jeff

Jacob Miller
Jacob Miller
12,466 Points
Jacob Miller
Jacob Miller
12,466 Points

You're probably going to want to use background-size: cover or background-size: contain to make the background scale. You can also add that to the background shorthand rule right before the url(). As far as I know, background-width is not an actual CSS property.

Jacob Miller
Jacob Miller
12,466 Points
Jacob Miller
Jacob Miller
12,466 Points

You can use the jQuery plugin "fitvid.js" to make your video responsive. Treehouse has a lesson that covers that here: http://teamtreehouse.com/library/build-a-responsive-website/advanced-techniques/flexible-videos-with-fitvidsjs