Mobile Styles for Projects

[00:00:00]
>> Jen Kramer: So, to this now, we can work on our styling. And if we go to Part 2 here, as it's gonna say we're gonna work, of course, on our mobile dimensions and then our desktop dimensions. And I will walk you through all of that. That's where you find the code pens.

[00:00:16]
The images are up here at the top. So we're gonna start by doing a layout that looks like this for mobile. So we wanna have the image on the top, we wanna have the text underneath. [COUGH] However, if we take a look at our HTML, you'll notice the way that our project is set up is that the text is on the top and the images underneath, we want the reverse for mobile, okay?

[00:00:43]
Now, why did we do it this way? Couldn't we just take the image and just cut the image? We could take just like this, we could drop the image right here inside of our code, and then definitely our image will be on top of our text. We could do that.

[00:01:02]
However, what we wanna do is think about search engines and accessibility once again. And in this case, what I'd like to do is lead with all of the text that describes the project and finish with the image. So, what I can do then is, using grid, I can swap those to go in a different order.

[00:01:21]
So, I've actually got the HTML in the order that I want, which a screen reader or Google will wind up reading this page, it is in the order that I want it in, okay? So, just something to keep in mind. All right, so let's write a little bit of CSS then, and I'm gonna scroll on down to just before my media query, and I can add a comment here.

[00:01:45]
This is my project section.
>> Jen Kramer: And then let's add some CSS. So, where I'm gonna start is with my main element. And I'm going to give it a little bit of margin and align my content in the center once again, cuz for mobile devices. So margin-top, 5rem, margin-bottom 3rem, and text-align center, right?

[00:02:25]
So, that is starting us off. Just those three little styles starts us off getting this all together. Now we can focus on each one of the projects individually. And remember that our projects have a class called project, that's for each individual project. So from practical CSS layouts to the bottom of the image is our project.

[00:02:53]
So we can give this a background color of white.
>> Jen Kramer: Because each of our projects has a bit of a background color in our design here.
>> Jen Kramer: We'll give it some padding, let's say 3rem. We'll give it our border radius.
>> Jen Kramer: Which, remember, we had set up as a variable, corners.

[00:03:32]
>> Jen Kramer: So that's a pretty good start right there, yeah? We have our white background, just take us many styles either. Look at that, we wrote main in project and a lot of the styling is already there in place. So, our text is all centered. We, of course, need to spend some time styling our techniques here, and we have the image right underneath.

[00:03:55]
But what we don't have is we don't have space in between each one of these projects. And the space in between these would be helpful to give us a little bit of separation between those. Also, we'll need to give ourselves a little bit of space in between our tags and our image as well.

[00:04:12]
So let's do that first between our tags and our image, let's add a little bit of space. And we'll do that with display grid, grid-template-columns, 1fr, and gap, 3rem. So, that'll give us now some space in between all of our text and our image. So, next is our projects are all a little bit close together, and I am going to give that a little bit of separation as well.

[00:04:51]
So that's our class of project, and we'll give that, oops, sorry, projects, plural. And here I'll give this a display, flex, flex-flow. We'll put it in a column so that they're stacked on top of each other. And I'm gonna say no wrap, because I never want these to wrap.

[00:05:17]
I don't want the columns to wrap next to each other, I want them to be in a column forever. And then finally, we can give them a gap of 3rem. So now we've got our little projects all stacked on top of each other, looking pretty good.