Mobile-First Responsive Build #9 - Mobile Styles (part 2)

Key Takeaways

all right then my friends so we've addressed the top section over here the next thing we want to turn our attention to are the projects and also the things I can do so if we head over to the index file we can see the next section this bit is called portfolio so I'm gonna grab that ID and style that first of all so underneath the last selector there I'm going to say portfolio but before I do that I need a hash because it's an ID and then inside this rule what I'd like to do first of all is give it a background image now that background image is going to be a URL and it's going to be this image inside the assets and it should be background something-or-other if I can find it square underscore BG PNG so let me now say we want to go into the assets folder and then we want the square underscore BG PNG file now for the background size I'm going to say cover and then I'm going to say background repeat' is no-repeat because I don't want this to repeat over and over and the background position is going to be bottom so it starts at the bottom and then the padding is going to be 30 pixels at the top and bottom and then 20 pixels to the left and right so that's section in general dot the background that section in general is going to have this padding okay so if I save this now we should see that it's a different color that's the color of the image and we see these kind of gritting in the background I thought it looked quite Spacey so that's the first thing done the next thing I want to do is this h3 at the top now that is not inside the grid remember that sits outside the grid the grid is this div the class of projects so let's do this h3 first of all so portfolio h3 and then inside all I'm going to do is say margin and bottom is going to be zero and then after that also text - a line and we'll put the text in the center save it and okay that's looking a bit better now we want to do these products right here and they sit inside a grid so we have three projects and each one is an anchor tag and they're all grid items so we need to grab those first of all so I'm gonna say dots projects and then a and on mobiles I want these also stack on top of each other so I want each project to be the full width of the grid and that is eight columns so from column line one all the way to column line nine so let me say grid - column and it's going to be from one to nine okay and then also I'm going to give each one a margin of 20 pixels top and bottom zero left and right okay so if we look at that now we can see each one of these now sits on top of each other and each item takes up the full eight columns in the grid right on a different row each time okay so what I'd like to do now is address the image size first of all and also centralize everything so what I'm gonna do is come down here and say projects and katuk and then I'm gonna do an Asterix and that means grab every single element inside those anchor tags so in our case it's going to be the image and the h4 now I want to style them both at the same time which is why I used the Asterix and the first thing I'm going to do is apply a margin to both of these things and it's going to be zero top and bottom 20 pixels left and right then a max width of 40% and that means that basically the image right here is at most going to be 40% of the width of the actual columns so if I save this now we can see they are much smaller like this the last thing I want to do is say text - a line or in fact we don't want text aligned we want aligned self and that basically takes the current things that were select in so the h4 and the image and it's going to align itself into the center like so okay so now what I'd like to do is actually move the text up to the side over here and to do that we could just say that is going to be flex display flex each one of these anchor tags because when that happens the elements automatically sit next to each other so I'm gonna say display is gonna be flex like so and now we can see they go up to the right dead simple alright so that is looking pretty good for that section now I want to do one more thing and that is just to color this h4 so let me come down here and say projects h4 and then the color I'm gonna paste this in is gonna be this color I'm gonna save it and it's more of a purple color now so it kind of makes it a little different from this h3 at the top okay all right cool so next I want to go down and I want to do this skills section so remember down here this has an ID of skills so let me grab that first of all and come down here and we'll say skills and first of all I want to give this some padding so I'm gonna say 30 pixels top and bottom 20 pixels left and right and then I also want to give this a different background color so it kind of matches the bottom bit over here so let me say the background is gonna be and let me just copy this hex code from my github repo so scoot that over there okay and if I save that now it's gonna kind of blend in a little bit more and in fact it's not doing because I haven't spelt background correctly save it now it kind of blends in a bit more awesome alright so now I want to style this h3 as well so skills h3 and I'm gonna say text - a line is going to be to the center save that and we need to make sure that spells skills not kills okay and that's now in the center now next we need to address these things right here remember that is a ul and it has a class of grid now first of all let me just target the UL and give this some margin so I'm going to say again skills and then UL and give this a margin and that margin will be 40 pixels top and bottom zero left and right to give you some breathing room now we want to style each one of these Li tags right because they're all sitting on the grid or grid items and we have four of them in total so what I'm going to say now is skills Li and for each one I'm going to apply a little bit of padding so ten pixels all the way around and then I'm also going to give this a background as well and this background is gonna be our G ba so we can have an alpha Channel zero zero zero four black and then not point two to make it quite transparent so if I save that now it should just look a little bit dark each one okay now I also need to use the grid - column property on each one now instead of me saying each one is going to go from like one to four I'm not going to do that because I don't want them all to go from one to four or anything like that what I need to do is say that each one is just gonna take up four columns in width and that means that each row is gonna have two because we have eight columns in the whole grid now the way we do that is by saying span four and it's automatically going to populate the different items in the grid into those columns and each item is going to take up four columns in width so we should have two on the top and two on the bottom now if I save that we can see we have two on the top and we also have two on the bottom now I'm also going to say text - a line is going to be to the center like so and that is looking okay now I've noticed that we don't have any gap between the elements in the grid so let me scroll back up to where we defined the grid initially and I'm also going to apply a gap property to that of ten pixels so if I save it now it looks a bit nicer now so we have that little gap in between each element so let me scroll all the way down so now we've done these Li tags what I'd like to do is just apply a little bit of styling to these images just to make them a little bit smaller so I'm gonna say skills and then image and each one is going to have a height of 80 pixels and the margin is going to be 10 pixels top and bottom Auto left right so that is looking a bit better awesome so this is starting to take shape now so from the top we have our welcome section we have our projects and also our skills down there and all that remains for the mobile is the contact form and the footer at the bottom and we'll do that in the next video