33. Starting to think mobile first - Responsive CSS Tutorial

Key Takeaways

I'm actually going to take this time so to start thinking mobile first what I'm actually going to do is completely remove my media query so let's take this out and take that out so we're left with this now we don't want this code just floating around like that so I'm actually going to take this text-align:center and make it the new default and I'm gonna take this Flex Direction column and I'm going to make that the new default and we can delete this extra stuff here what I'm also gonna do is I'm gonna delete these for the moment and you're gonna see why because when I delete that and if we hadn't had the media query there at all and we go and take a look at it I had small screen sizes we're almost done we've sort of done the mobile first design there's there's not a lot to it here that we're missing there's some spacing issues we need a little bit of margin to separate some stuff a few little decorations here or there this just needs the box we need to fix the typography thing I talked about but you're sort of 90% of the way there the problem with working on the big screen first is you're writing a bunch of code and then you're overwriting it all at the small screen size you're resetting your columns back to what they were before you're changing things to be back the way if you hadn't done it it's exactly what it would have looked like now the problem is when we get to the big screens it just starts stretching and not looking so nice so what we want to do is build in that point where all of a sudden at one point we go okay we're big enough now we're gonna add the two columns in there so that's where the media query comes in so we can add that back in now at media but what I'm gonna say this time is we're gonna do a min width instead of a max width of 675 pixels so now we can say our container flex flex Direction is row so right away by doing that if we come and take a look when we hit the right screen size oh now we have two columns and then we have one and it's working pretty good now I never said any sizes on this this is just the defaults that are popping up right now is now I could say my main has the width of I said 75 my aside has the with of 20 and that's it I don't have to worry about whoops I don't want that there I don't have to worry about overwriting this anywhere I don't have to go and all of a sudden say whoop I also need to now in my media query like I don't have this as my default that I then need to reset up to 100% so we've just said it one time we've redefined it for the big screen because the small screen was perfect and in general small screens are much simpler so it's a lot easier to do all of your small screen stuff and then add on a few little things here and there afterward so now if we go look we have our gap between there and everything is starting to fall into place