Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Debugging CSS with Chrome DevTools

Well done!

You have completed Debugging CSS with Chrome DevTools!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Debugging Styles Solution

5:55 with Guil Hernandez

In this video, I'll show you one solution to the "Debugging Styles" exercise.

Hi there, were you able to debug the CSS problems in the RSVP app? 0:00
Even if you fixed some parts, that's still great. 0:04
So now I'm gonna show you what I did. 0:06
First up, let's see what's preventing the header background from showing 0:08
up on the page. 0:11
I'll open Chrome DevTools, and inspect the header element. 0:12
Everything looks pretty good in the Styles pane, except for 0:17
the crossed out background property in the header rule. 0:20
To the left of the cross.property I see a warning, 0:23
hovering over it displays the text invalid property value. 0:26
Can you spot the issue? 0:30
Well gradient is an invalid CSS value, so it's disabling the entire 0:32
background value including the background image and background repeat values. 0:37
These are values used to display a linear ingredient, 0:41
so we need to change this to linear-gradient and that fixed it. 0:45
Next the heading is too close to the top edge of the app. 0:50
It's throwing off the layout of the form. 0:54
Inspecting the h1 styles shows me that there's 0:57
an element.style setting its margin to 0. 1:01
It's overriding the margin top and margin bottom property set in the h1 rule, and 1:04
I know that because they are crossed out and 1:08
turning off the margin 0 decoration resolved the problem. 1:10
Well over in the Elements panel, I see the in line style with margin set to 0. 1:14
So removing it from the markup by double clicking the opening tag, selecting and 1:20
deleting it reapplies the desired margins. 1:25
Now let's see what's going on with the form's submit button. 1:30
Inspecting the button shows me that its background color value is being 1:34
overwritten by the background color set in the button last-child rule. 1:37
Also it looks like this button rule is applying unnecessary top and 1:43
right margins to the submit button, which explains why it's not as tall and 1:46
as wide as it should be. 1:51
And turning off the margin properties in the button rule, and the background 1:53
color property in the button last-child rule does in fact fix the problem. 1:58
But why is this happening? 2:03
Well the properties in the button last-child and button rules are meant for 2:06
styling the guest buttons only, but they're declared with 2:11
button element selectors which target all buttons on the page. 2:15
The submit button is also a button element, and 2:19
since there are no margin properties declared in its button submit rule, 2:23
it's taking on the margin properties declared here in the button rule. 2:27
The submit button is also a last-child of the form. 2:32
The button last-child pseudo class selector has a higher specificity 2:36
than the button submit selector, so it's overriding its background color property. 2:40
To fix this, we can either update the selectors to specifically target 2:46
buttons that are descendants of the class guest with the descendant selectors. 2:51
So I'll type guest in front of each button selector. 2:56
Or we could add a class to the edit and remove buttons, then target the classes in 3:07
your CSS, but I'll stick with descendant selectors for this exercise. 3:11
And now the guest button rules are grayed out in the Styles pane 3:17
because they are no longer targeting and applying styles to the submit button. 3:20
Finally the guest list items are being displayed on separate lines 3:24
when they should be displayed as four equal sized items side by side 3:27
when the view port is 469 pixels or wider. 3:32
Well if I inspect the parent UL's box model properties in the computed pane, 3:35
I see that's it's not taking up a full line on the page as it should be. 3:41
Remember, UL elements are block level elements by default. 3:46
Switching over to the Styles pane, we see that there's an id selector on 3:50
line 27 overriding the display flex property applied to the guest 3:55
list selector down in the media query on line 193. 3:59
So setting its display to inline block here. 4:03
IDs have higher specificity than class and element selectors, so 4:08
even though the ID appears before this class in the CSS, it's overriding 4:11
the display flex declaration and turning the ID's display property off fixes it. 4:17
Good. 4:23
Now once last issue. 4:24
There's all this white space on the left and right sides of the guest list. 4:25
Inspecting the guest list's UL 4:30
shows that the left edge of the UL is up against the right edge of the h2. 4:33
Well earlier I hinted that the float properties have something to do with this. 4:38
The h2 and label and check box below it are positioned using floats. 4:42
H2 is floated left and the label right. 4:48
Now the guess-list UL does not have a float. 4:52
So the space between the two floated elements in the UL needs to be cleared. 4:56
We need to set the UL to move down and pass clear to both the left and right floats. 5:00
So selecting the guest list UL, and in the media query 5:05
adding clear both to the rule fixes the layout, and we're all set. 5:10
I've made lots of changes. 5:17
So now I can click over to the sources panel, copy my changes and 5:19
paste them into my style sheet. 5:24
Let's not forget to remove the inline margin 0 declaration for the h1. 5:33
>> You may have done things differently and that's okay. 5:41
Remember we're always here to help, so 5:45
if you have questions about anything covered in this workshop, 5:46
feel free to reach out to the Treehouse staff or other students in the community. 5:49
Thanks everyone and happy debugging. 5:53