34. Styling the featured article - Responsive CSS Tutorial

Key Takeaways

spacing on things isn't the most work we sort of have to do is with this we need to add this line that's gonna be coming through on here and just add some spacing between our articles in general because if we come and take a look at them we'll go to our small screen we are not spaced out properly the spacing on things isn't very good these are really stuck together so we're gonna add in that spacing that we need right now now if we come and we look at the original design we do have a lot more space around my date this spacing actually looks pretty good but we'd need a lot more space here and here with this line coming through so let's start with just getting the space around my date and my three comments thing that's right there now where we do that we don't even need to go into our article to do that right now we need the first part since we're just looking at something in there is actually in the typography so we can come back up and that is my article info we don't have a selector for it so I'm just going to copy that we have the read more read more so we can come down here and put my article info I want you to create the spacing for it with one line of CSS and I want you to use the shorthand and add in that empty space it's margin or padding and people mix those up all the time but I think you won't have confused it yet because we've been using almost exclusively margin up until now once we start doing more projects with padding you might start mixing them up a little bit the spacing is pretty big on it I want to make it even on the two sides this is where it depends a little bit how you like to work so and the reason I'm saying that is you could sum I tend to always like putting margin bottoms only but I have exceptions because if you're only dealing with margin bottoms it definitely makes your life a little bit easier but sometimes it's nice to have a margin top just to simplify things so I'm going to do that so I don't have to add a margin bottom on my image and I'm just gonna put this space and this space all on the date it looks quite a bit bigger than my font size so I'm gonna start with like a 2.5 m and a 0 maybe it's too big I think it might be but I tend to go bigger and then shrink down and there's a really good reason that I do that a lot of the time with margins there's this thing that happens where you always end up putting them too small and then you think it's not bad but maybe and know just go bigger always go bigger than you think so start with a big number and slowly reduce until you're happy with it so it does look a little bit big so let's just drop that down to 2 and I think that looks much better and here's the fun part and that is going to be adding in the underline after I continue reading here so that line that goes all the way across the bottom I want you to think about where you do that how you do that how you pull it off how would you create the spacing that you need on the two sides of that line so what you know if you have to jump into the index look at the mark up a little bit try and analyze it and see where you'd put that and how you think you might be able to pull that off if you get a little bit stuck that's fine there's a bit of a trick to this one it's not complicated but it's not always something you'd think of when you're first starting off with this stuff so I hope you had success with that and you figured it out if not - really don't worry about it but what I'm going to do is in my layout I'm gonna come down and down and down and down and we're gonna create a new section here called articles because I am going into my article itself and I'm breaking that down a little bit now so for this I want to take my article featured because this is the only one that has the underline on it and I'm going to add a border bottom to it so that's gonna create that line a lot like we did in our navigation actually so border bottom and we can give it the color that we need we'll give it one pixel and we'll make it a solid line let's go and take a look at how that looks so there we go we have the line that's actually showing up but the spacing and everything is off it's just not where exactly we need it to be so how can we fix that but we need two different things the first one is I'm gonna add padding but I only want the padding on the bottom and I'm going to do it this short hand just to illustrate why so I'm gonna do 1 mm of padding and we'll go take a look and you can see it's pushing everything inward and you know what let's also give this a background color to make it super clear what's going on so we're gonna give this a pink background so we can look at what's happening so we can see the size of my featured article is exactly the same but when I added that padding it pushed everything inside of that box a little bit and if we make that a bigger number it's gonna push it even more so we're pushing all inside but you'll notice the border is staying on the outside of my padding so the borders all the way over here so if this padding was only on the bottom instead of being on all these sides it would just be creating empty space right here where we want it so I can take this down to maybe back down to a 1 and I can also switch it over to padding bottom and if you wanted to use the padding shorthand it's perfectly fine there mention if you're only putting it on one side I don't think personally there's anything wrong with using the padding bottom or padding right or that type of thing it's when you're using two or three sides it's a little bit faster to actually do it with the shorthand but if you use the shorthand for everything it's kind of cool to be consistent so I don't blame you um so you can see it has created that space we want my border is right there now I also want to increase this space a little bit and we can do that with my margin it's an margin-bottom and i'm gonna make it way too big for now just to illustrate that it is working and so you can see this is my pink box the padding was working inside so that's why we have a gap right here then I have my border and then I have my margin after so if you go way back to when we learned about the box model it was always padding first then a border then a margin we don't use borders terribly often so sometimes we forget where they flow into the whole box model thing so if you didn't get this it's completely fine now this is too big of a space I'm gonna drop that down to it too and of course turn off the pink background and you know what I switched that but I think it two and two it looks a little bit better just to make this spacing completely equal I think it'll look better in the long run if we do that so there we go I think that is great for my featured article everything is good there now we're gonna jump into styling this one here and this is where we had that trick that I talked about and actually you know what I think that would be better in its own video because it's a little bit weird and I want to be able to focus on it or find this video again if you need to reference it so I'll see you in the next video we'll take a look at how we can change the order of the content in there to match the design where the image is actually on top and when we look at this one the tech