Article Layout Solution

[00:00:00]
>> Jen Kramer: So first thing to do when you're working with this is to take a look at the structure of your HTML. So you'll know exactly what kind of selectors you're going to need to form. And so one of the things that I did for you here is I put an ID of the inside on the body tag here, okay?

[00:00:14]
So that you have a little handle. It could very well be that you wind up with articles in the sides, other places and other documents. But this happens to be the one associated with the inside page, right? So when you scroll down to the main content, you see we have our main tag again.

[00:00:31]
We have an article. There's the article. Blah, blah, blah, blah, blah. We have on the side tends what people are saying about the book, there's our side, okay? And so that's what we have to work with. Our main tag is going to be what? The main tag becomes what?

[00:00:50]
>> Speaker 2: Flex box.
>> Jen Kramer: Our flex container, yeah, the parent. And then the article and the aside become what?
>> Speaker 2: The items.
>> Jen Kramer: They're the flex items, right, the children. So then we can go ahead over here and write our CSS right here. Do I need to change anything with main here?

[00:01:13]
This very first main. Do I need to change anything?
>> Jen Kramer: Nope. That's exactly what we need, right? And then down here, in our big logic statement here, what do we just need to do? Add inside article and inside aside. That's all we need to do, okay? And then down here when we get to the media queries, what we need to do is figure out what we're going to do for widths.

[00:01:40]
This is what I did. I just worked with the columns that I had in each of those dimensions. I decided I would just stay with those columns. You could have changed the number of columns that you had for the inside pages if you wanted to. That would certainly be one way to approach the solution.

[00:01:52]
But I just said, well, we're working with 11, how about 7 and 4, okay? And then when we got down to 950 and we're at 14, then I said, okay, how about 10 and 4? And then when I got down here to 1,200 pixels, I said, well, how about 12 and 4?

[00:02:09]
And technically speaking, I've repeated myself over and over again for the inside aside. But again, for documentary purposes, that sort of helps you understand the math and how it's all fitting together, okay? So that's how I put together my answer. Your answer may be different. You may have had different numbers of columns.

[00:02:26]
I would be cool with that as long as proportionally speaking, the page looks right. A fat area for your content, a skinny area for your article.