Debugging Styles Solution5: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 decedent 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 clear pass 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 up