36. Playing with the title's position and negative margins - Responsive CSS Tutorial

consequence and note so there was one unintended consequence didn't notice before which was we got rid of the spacing on our titles and that got this stuck on this we'll fix this in this video as well but the main focus will be here like I mentioned getting it to pop on over to this side it certain sizes the way I'm going to do it now the reason I'm saying it's not a best practice video as much as a exploration video is because if you had a really long title this would cause some problems there's the potential for overlapping but I just want to show you something that we haven't looked at yet it's something that I try and avoid when I can but I want to show it to you anyway and I think it is fun for the layout purposes on this one and something is worth exploring because while you try and avoid it it's good to know that it is a possibility and that its negative margins so I move all the way down to my layout area we're now all the way down till we find my articles there we go and I'm going to create a new media query because we're going to be dealing with these two pretty much so at media as far as the size of where do I create this media query for don't create media queries based on the size of certain devices or set devices because then you can always do things that you want to do or those devices you know people will make too many media queries because they're trying to match certain devices when they don't need one or in this case I'm trying to really base it on my layout I'm sort of just guessing it the size we're going to tweak it a little bit as we go so I'm going to do 500 pixels for now and let's see if you see how it goes from there so inside my media query what I want to do is select my article recent main and I'm gonna give this a margin top of negative I don't know that's art with negative 1m and to see how that affects things so you can see this sort of gotten a little close together let's just try changing that maybe two negative two you can start seeing these are starting to overlap and we can bring that maybe up to a whole negative three and they're starting to line up how we want them to I'm going to switch that to a 2.5 because I think it's gonna be bang on how I want the top of the text is sort of lining up now as I mentioned this can create text overlap so it's probably not a best practice overall here yeah so this is my longest one so I'm going to base it on this title but what would happen if you have a really long title it would break this whole layout so I'm gonna show you how we can do it with a negative margin so you know if I bring this up really big you can see it's pulling it up on top of other things and it's one of the problems with negative margins but it is important to know you can have a negative margin because sometimes it does come into use and it is useful to have so that is perfect now the other thing I'm going to do in this media query is do my article info and so there's a text aligned to the right and there we go we have the layout that I wanted where we have those going like that now the problem is where's the media query Canyon where is 550 pixels so we're gonna shrink and it's really really close but on this one it's looking perfect so you know it's one of those ones where you have to judge it by eye a little bit I'm gonna bump it up to 550 just because I don't want those to get so close to each other so it gives us this small little range where we have two columns and then where it pops over back to the big layout where we're gonna have to change what that looks like anyway so that is how we can go and do something like that with a little bit of hackery to give ourself this fake two column look based on the way our markup is but again make sure you keep this really really simple because it's keeping cooking simple but if this was how to keep your cooking simple all of a sudden I'm a little worried we have overlap and it's causing problems so while negative margins can be fun for creating cool layouts or cool effects sometimes and sometimes you want overlapping content it's always possible you want two things to sort of overlap and there's other ways of doing it with positioning as well which we're going to explore later but just when you use the negative margin be very very aware that this is a possibility so I think what I'm going to do is while we've explored it while we've seen it you want to sort of rebuild this on your own at one point and keep it in your code because I do think it looks really nice with how I've set this up it's just not something we can do in a responsible way so we've looked at how to do it but now we're just going to take it all off because I think it's going to cause more problems in the long run and it's really important that you keep your code as functional as possible and that it can accommodate for all these situations so if you're ever putting together a demo site make sure you don't only use short text it's real like if you're doing a business card template don't is a really short name Kevin Powell is not a good name to use you want to get a really really long name on the template to make sure that it can work with super long names and it's not running into issues so the same thing here we you want to test short titles and long titles to make sure everything will work with your code