Bummer! This is just a preview. You need to be signed in with a Treehouse account to view the entire video.
Adding Responsive Classes5:17 with Guil Hernandez
In this video, we'll add the final touches to our website by adding responsive utility classes, and custom rules to style the Treehouse content and callout sections.
[Guil Hernandez] So next, let's hide some of this content in the extra small device in viewport ranges,
because, when we reduce the viewport, we can see how those images are looking a little too big.
Let's go ahead and adjust this.
Back in our index.html file,
we will want to hide this first column here
and the extra small devices and viewport ranges.
We will do that by giving it the "class" "hidden-xs"
Next, we will also hide these teacher information below about the Treehouse text.
We'll go ahead and find that in the markup.
If we scroll down here, we'll see this row and the image and teacher name.
Let's just go ahead and hide this entire row.
Right after the row class, we'll say "hidden-xs"
When we save it and take a look at it in the browser, I'll go ahead and hit refresh.
There we see our content and once we reduce the viewport size,
we can see how it's now hidden in that extra small range.
and there we see it again--cool!
Okay, so what we need to do next is go back into the mark up and add a few modifier classes,
then, some custom CSS rules to style and layout our text.
Back in our "index.html" file, in our treehouse content section,
I will find the second row and right after the row class,
I'll go ahead and add a custom modifier class of "th" or Treehouse copy [th-copy].
We'll use this to add a little bit of padding to the top of the copy.
I'll copy that and then I'll go ahead and scroll,
and on the next row, we'll add this to which is the row that we're hiding in the extra small devices.
Right after row I'll go ahead and that "th-copy" class.
Then, finally I'll scroll down here to our teacher descirption paragraph,
and I will add the "th-copy" class to this as well.
Again, these aren't predefine bootstrap classes
These are simply classes we're adding to add some white space around the content and we'll see that in just a bit.
Because now, we need to go into our CSS directory and bring out "mystyles.CSS"
where we'll add a few custom rules for our layout.
In the layout section, I will go ahead and scroll down to the bottom here,
and I will select the "th-copy" class we just created.
and I will just add a "padding-top" property
and give it a value "30px."
All right! So. let's go ahead and take a look at it in the buzzer.
Now, we got that nice 30 pixels of white space between the image and text.
It looks like we're almost done with our layout.
Next, we'll need to style our "Sign Up" for Treehouse call out button,
and I've already added that right arrow gif icon.
We'll just need to style it up with some custom styles.
As we could see here in our design comp, it has the green background
and a small bottom border here to give it up a little bit of a shadow.
Back in our "index.html" file, right below the Treehouse content we were working with earlier,
you'll find the "
This is what contains that callout button.
Inside the angle tag, I'll go ahead and add "class=btn btn-success" class,
and finally, we'll make it a large button by giving it "btn-lg" class.
I'll go ahead and save our index file and go back into "mystyles.css."
Then I'll scroll down to the button section and we'll start creating the styles for that callout button.
All right--so, right down here, I'll go ahead and select that button "success" class we just created,
and we'll start by giving this a "box shadow."
So we'll say "0 3px 0 #23812f."
We'll then give the text a little bit of "text shadow."
So we'll say 0 1px rgba(0,0,0,.3)"
and let's go ahead and increase the font size.
Let's say "1.5em"
and we'll want to give our button a width,
let's say "330px."
And finally, let's give our button a little bit of padding,
say "15px" top and bottom and "0" left and right.
All right, so go ahead and save this, and when we bring it up in the browser,
there we see our nice Sign Up for Treehouse callout button.
You need to sign up for Treehouse in order to download course files.Sign up