Part of the work we're gonna be able to do here is also going to translate into the work that we have to do on the index page here, so we're going to be able to be productive with our code.

Now let me actually get back to this one that has a lot of content just because I wanna be able to see this because what I'm envisioning is a large column coming from about right here to about right here on the page.

So this is gonna be centered and then the title is gonna be on the top, the image is gonna spread from side to side and we'll also do some nice things like giving it some rounded edges and things like that, and then the content is gonna fit within that column as well.

So let's get started with this. I'm going to open up Visual Studio Code and it's time to add some classNames to our divs here. So the very first thing I'm gonna do is I'm going to create a className called blog-container and I'm making this purposefully general because I wanna be able to use this blog-container for a blog detail page and also for our index page.

So the wrapper is gonna be inside of blog-container but in order to accomplish what we're looking to do, we actually need two containers, we need one for the entire page to layout the page and then we need another one for the content itself.

So I'm gonna create another div here and for this div, I'm gonna give it a class name of content-container. And make sure you close this div off, hit save and if you have prettier, it will clean up the formatting for you.

blog-detail.js

return (
  <div className="blog-container">
    <div lassName="content-container">
      <h1>{title}</h1>
      <img src={featured_image_url} />
      <div>{content}</div>
    </div>
  </div>
);

So we have this content-container, we have our h1 title, our image, and then our div. I'm going to leave the h1 by itself right now 'cause that formatting actually looks good and now I'm going to wrap our image inside of a div.

So I'm gonna say this is a className of featured-image-wrapper, and make sure you close off that div tag, and let's also wrap up the content. We already have a div for it so let's just give it a className of something like content, something very creative.

So now that we have this, we're not actually gonna have to work with it quite yet, but we do have a className for each of our key elements and the reason why I didn't do it for the h1 right now is because the base h1 styles we set up do look good in what I wanna use for this blog.

But once again, this is your own portfolio so these style episodes, I want you to treat these almost as optional or maybe as suggestions. If everyone has an identical looking portfolio, then I've not done my job.

I want you to be able to take these suggestions and then add your own flavor, add your own look and feel. I'm simply doing it because if I didn't, at the end of this entire course, it would be a hideous looking portfolio site and that wouldn't be good.

So what I'm doing here is just giving some base styles, this is how I personally am building it but definitely feel free to add your own look and feel to it.

So now with all of that being said, let me close out these other files, and let's open up our main.scss file and at the very bottom here, I'm going to add a spot for our blog styles. And let me copy this name here and create the actual file itself, so we're gonna have a blog.scss file and we can save our main import file, close it off, and now add our styles.

As you can see, we have a few different classNames, we're only gonna work with three in this guide, we're not gonna use the content one yet. So we have this blog-container and then inside of the blog-container we have our content-container, and I'm just doing this so I'm not having to reference them as we're writing the code.

And inside of content-container, we have this featured-image-wrapper, so that is everything that we need. So for the blog-container, this is gonna be a flex-container so I'm gonna say display: flex and this one I'm gonna use the flex-direction of column.

Remember that when you're working with a flexbox, the default direction or behavior is for you to have your elements and if I called just display: flex, you would have the title, then you'd have the image on the right-hand side, then you'd have the content over here on the right. If you want them to stack on top of each other like what we're looking to do, then we need to say flex-direction: column here.

So now with that, let's say that we want to align this in the center so I'm gonna say align-items in the center and that's all we need to do for our blog-container and we're gonna be able to reuse this for our index page here in a few guides.

So now that we have this content-container, we need to actually add some styles to it. It also is going to be a flex-container, the flex-direction here is also going to be column 'cause we want these stacked on top of each other and this is also going to have the, actually you know what... this isn't gonna need the align-items.

I don't believe we should just be able to say flex-direction column on that. This one does need a width though, so let's say we wanna start off with 800 pixels and then that should be all that we need there, we can add any polish ups later if we need to.

And then for the featured-image-wrapper, I wanna select the image inside of it and I want to add some margin, so I wanna add 15 pixels on the top and bottom, zero on the left and right, the width should be 100%, the height is gonna be 350 pixels, we're gonna add a little bit of a border-radius of 5 pixels to round out the edges and then I want the image centered, so no matter what type of image gets uploaded, if it's a tall one, a wide one, I want it centered, so it has a universal look and feel. So to do that, I can say object-fit: cover.

blog.scss

.blog-container {
  display: flex;
  flex-direction: column;
  align-items: center;

  .content-container {
    display: flex;
    flex-direction: column;
    width: 800px;

    .featured-image-wrapper {
      img {
        margin: 15px 0px;
        width: 100%;
        height: 350px;
        border-radius: 5px;
        object-fit: cover;
      }
    }
  }
}

Okay, let's hit save and let's see if this is what we're looking to do. I'm gonna come back to Google Chrome and wow, look at that, we have the exact look and feel that we want.

So we have our title stacked on top of our image, and then all of our blog content here. Now you may ask why does this allow for scrolling to the right and it's because we need to be able to take our content here and as you can see, we have HTML code embedded inside of it, and we need to be able to take that and render that properly, so we're actually gonna render it like HTML.

We're not gonna do that in the next guide or even the next couple guides because in order for you to have that HTML code, we're gonna have to integrate our rich text editor, so we'll be doing that later. But for right now, we have some nice formatting going on for our Detail page so I'm happy about that.

In the next guide, I want to start applying some of those same styles to the blog index page.

Resources

• Source code