1 00:00:00,450 --> 00:00:04,360 Hi there, were you able to debug the CSS problems in the RSVP app? 2 00:00:04,360 --> 00:00:06,570 Even if you fixed some parts, that's still great. 3 00:00:06,570 --> 00:00:08,530 So now I'm gonna show you what I did. 4 00:00:08,530 --> 00:00:11,700 First up, let's see what's preventing the header background from showing 5 00:00:11,700 --> 00:00:12,870 up on the page. 6 00:00:12,870 --> 00:00:17,560 I'll open Chrome DevTools, and inspect the header element. 7 00:00:17,560 --> 00:00:20,080 Everything looks pretty good in the Styles pane, except for 8 00:00:20,080 --> 00:00:23,660 the crossed out background property in the header rule. 9 00:00:23,660 --> 00:00:26,830 To the left of the cross.property I see a warning, 10 00:00:26,830 --> 00:00:30,280 hovering over it displays the text invalid property value. 11 00:00:30,280 --> 00:00:32,100 Can you spot the issue? 12 00:00:32,100 --> 00:00:37,160 Well gradient is an invalid CSS value, so it's disabling the entire 13 00:00:37,160 --> 00:00:41,590 background value including the background image and background repeat values. 14 00:00:41,590 --> 00:00:45,670 These are values used to display a linear ingredient, 15 00:00:45,670 --> 00:00:50,470 so we need to change this to linear-gradient and that fixed it. 16 00:00:50,470 --> 00:00:54,720 Next the heading is too close to the top edge of the app. 17 00:00:54,720 --> 00:00:56,760 It's throwing off the layout of the form. 18 00:00:57,840 --> 00:01:01,150 Inspecting the h1 styles shows me that there's 19 00:01:01,150 --> 00:01:04,260 an element.style setting its margin to 0. 20 00:01:04,260 --> 00:01:08,770 It's overriding the margin top and margin bottom property set in the h1 rule, and 21 00:01:08,770 --> 00:01:10,880 I know that because they are crossed out and 22 00:01:10,880 --> 00:01:14,865 turning off the margin 0 decoration resolved the problem. 23 00:01:14,865 --> 00:01:20,300 Well over in the Elements panel, I see the in line style with margin set to 0. 24 00:01:20,300 --> 00:01:25,230 So removing it from the markup by double clicking the opening tag, selecting and 25 00:01:25,230 --> 00:01:28,570 deleting it reapplies the desired margins. 26 00:01:30,030 --> 00:01:32,120 Now let's see what's going on with the form's submit button. 27 00:01:34,280 --> 00:01:37,970 Inspecting the button shows me that its background color value is being 28 00:01:37,970 --> 00:01:43,130 overwritten by the background color set in the button last-child rule. 29 00:01:43,130 --> 00:01:46,810 Also it looks like this button rule is applying unnecessary top and 30 00:01:46,810 --> 00:01:51,120 right margins to the submit button, which explains why it's not as tall and 31 00:01:51,120 --> 00:01:52,290 as wide as it should be. 32 00:01:53,780 --> 00:01:58,870 And turning off the margin properties in the button rule, and the background 33 00:01:58,870 --> 00:02:03,830 color property in the button last-child rule does in fact fix the problem. 34 00:02:03,830 --> 00:02:05,350 But why is this happening? 35 00:02:06,400 --> 00:02:11,490 Well the properties in the button last-child and button rules are meant for 36 00:02:11,490 --> 00:02:15,940 styling the guest buttons only, but they're declared with 37 00:02:15,940 --> 00:02:19,860 button element selectors which target all buttons on the page. 38 00:02:19,860 --> 00:02:23,050 The submit button is also a button element, and 39 00:02:23,050 --> 00:02:27,180 since there are no margin properties declared in its button submit rule, 40 00:02:27,180 --> 00:02:30,770 it's taking on the margin properties declared here in the button rule. 41 00:02:32,230 --> 00:02:36,048 The submit button is also a last-child of the form. 42 00:02:36,048 --> 00:02:40,275 The button last-child pseudo class selector has a higher specificity 43 00:02:40,275 --> 00:02:44,910 than the button submit selector, so it's overriding its background color property. 44 00:02:46,440 --> 00:02:51,370 To fix this, we can either update the selectors to specifically target 45 00:02:51,370 --> 00:02:56,380 buttons that are descendants of the class guest with the decedent selectors. 46 00:02:56,380 --> 00:02:59,753 So I'll type guest in front of each button selector. 47 00:03:07,833 --> 00:03:11,873 Or we could add a class to the edit and remove buttons, then target the classes in 48 00:03:11,873 --> 00:03:15,630 your CSS, but I'll stick with descendant selectors for this exercise. 49 00:03:17,340 --> 00:03:20,310 And now the guest button rules are grayed out in the Styles pane 50 00:03:20,310 --> 00:03:24,500 because they are no longer targeting and applying styles to the submit button. 51 00:03:24,500 --> 00:03:27,860 Finally the guest list items are being displayed on separate lines 52 00:03:27,860 --> 00:03:32,140 when they should be displayed as four equal sized items side by side 53 00:03:32,140 --> 00:03:35,780 when the view port is 469 pixels or wider. 54 00:03:35,780 --> 00:03:41,900 Well if I inspect the parent UL's box model properties in the computed pane, 55 00:03:41,900 --> 00:03:46,990 I see that's it's not taking up a full line on the page as it should be. 56 00:03:46,990 --> 00:03:50,190 Remember, UL elements are block level elements by default. 57 00:03:50,190 --> 00:03:55,440 Switching over to the Styles pane, we see that there's an id selector on 58 00:03:55,440 --> 00:03:59,950 line 27 overriding the display flex property applied to the guest 59 00:03:59,950 --> 00:04:03,530 list selector down in the media query on line 193. 60 00:04:03,530 --> 00:04:06,800 So setting its display to inline block here. 61 00:04:08,010 --> 00:04:11,590 IDs have higher specificity than class and element selectors, so 62 00:04:11,590 --> 00:04:17,570 even though the ID appears before this class in the CSS, it's overriding 63 00:04:17,570 --> 00:04:23,610 the display flex declaration and turning the ID's display property off fixes it. 64 00:04:23,610 --> 00:04:24,440 Good. 65 00:04:24,440 --> 00:04:25,800 Now once last issue. 66 00:04:25,800 --> 00:04:30,410 There's all this white space on the left and right sides of the guest list. 67 00:04:30,410 --> 00:04:33,580 Inspecting the guest list's UL 68 00:04:33,580 --> 00:04:38,700 shows that the left edge of the UL is up against the right edge of the h2. 69 00:04:38,700 --> 00:04:42,870 Well earlier I hinted that the float properties have something to do with this. 70 00:04:42,870 --> 00:04:48,990 The h2 and label and check box below it are positioned using floats. 71 00:04:48,990 --> 00:04:52,430 H2 is floated left and the label right. 72 00:04:52,430 --> 00:04:56,100 Now the guess list UL does not have a float. 73 00:04:56,100 --> 00:05:00,210 So the space between the two floated elements in the UL needs to be cleared. 74 00:05:00,210 --> 00:05:05,590 We need to set the UL to move down and clear pass both the left and right floats. 75 00:05:05,590 --> 00:05:10,620 So selecting the guest list UL, and in the media query 76 00:05:10,620 --> 00:05:15,970 adding clear both to the rule fixes the layout, and we're all set. 77 00:05:17,520 --> 00:05:19,310 I've made lots of changes. 78 00:05:19,310 --> 00:05:24,200 So now I can click over to the sources panel, copy my changes and 79 00:05:24,200 --> 00:05:26,704 paste them into my style sheet. 80 00:05:33,010 --> 00:05:37,664 Let's not forget to remove the inline margin 0 declaration for the h1. 81 00:05:41,793 --> 00:05:45,070 >> You may have done things differently and that's okay. 82 00:05:45,070 --> 00:05:46,610 Remember we're always here to help, so 83 00:05:46,610 --> 00:05:49,300 if you have questions about anything covered in this workshop, 84 00:05:49,300 --> 00:05:53,200 feel free to reach out to the Treehouse staff or other students in the community. 85 00:05:53,200 --> 00:05:54,630 Thanks everyone and happy debugging.