Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, I'll show you one solution to the "Debugging Styles" exercise.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up