Styling the Newsletter Detail Component
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

[00:00:01] Hi welcome back to our apartment building in the sky. We're going to end in the rest of the styles to our detailed polling here. So let's go ahead and start off with the box here and then we'll add any detail. So I'm going to go to my or the newsletter the opponent. And while the newsletter dodgiest just a newsletter component and is here in wonks here let's just copy this and go back to the detail and place this entire column here to call the three day Schwarm replace it. Let's get rid of the row here and then let's see if that let's get rid of the class name here. Am I correct. And let's head to just newsletter because we need for each one of these. I'm going to click on one and we have our content. OK. So now what we want to do is basically follow the same approach as we did in here minus the archives. So let's go to our newsletter again and let's take the content component wallow because we already have this right here. So basically we just need to style this correctly. I'm trying to think what we should do is a news letter. Let's go to our newsletter diocese. US it looks like flex in space between so we could get you tell and just give this a class name. This is the parent a class neme newsletter detail. Now it's gonna see us us in our newsletter all the time and you file ANNCOL newsletter detail on your score details. See it's us now the this file in your mind. [00:01:59][118.1]
[00:01:59] ICSA us and are here to import our flash use later underscore Vitiello. OK now let's have record detail on the newsletter Dashti tell me she's the correct and say display works and they justify content space between. OK all right are you looking like I'm going to keep this one. It's all going to right click on this and open we can do type just so we can refer back to this. Okay so first thing I noticed is that the content is not there. Maybe it's because we open a new tab OK so we need to do is actually I'm just going to click directly on it and we need to do is we need to specify with this. So if we had over to our newsletter dies see size while our newsletter content is going to be in here. Certainly a lot of content as a would basically we can just apply these exact same styles to our newsletter detail. So let's get to work our content and detail. And let's go to our newsletter content and look at the structure of this what we can do is we can just copy this entire thing and go to work detail here. And let's kind of look at this so I'm going to paste it in your regular function but we're just going to reference it. So our first layer as newsletter content and then we ever image container only ever links so pretty simple stuff looks like or you have to do is say on this first one is a class name is equal to newsletter content and must say on this one class name is equal to you. Use letter for image container. My bad. [00:04:00][120.9]
[00:04:01] And then I think that's about all we have to do with get rid of this GSX that we pasted in. Let's say that look in her app here and see what we have. Kalends go back and select an item that's looking pretty nice. We didn't have any image on this one so that's why it's not displaying an image which is it. So this is displaying exactly what we want. Actually we need to select one with an image. So yeah that works. I clicked on another one and it allowed us to go there. All of your is probably probably all of images. But yeah. So I clicked on this. Yes. The one down here the seasons of Thanksgiving the Spooky Business one of those two and it's displaying her content correctly. Let's just add in the margin right here if we look at our app it's about 37 pixels are designed here so we can just say our user detail here. We can just add another one and say actually it's pretty unique some sort of detail. Let's just say on this one it's just a margin top of 37 pixels. Let's go back in here and see what we have and yet pushes it down. It's looking really clean and that's it for the styling on this one. Let's go ahead and go back and we have her newsletter completely done except for little parts that come back and fix. We're trying to get the bulk of everything done the hard parts or the was smart parts rather. And then we'll come back. [00:05:42][100.8]
[00:05:42] So the next thing we need to do is add in all the styles for this support quest. So we'll catch Y. We'll get into that in the next few guys so I'll catch you then let's committer coated with cigarettes that is good. Come on let's say finish styling the newsletter component. And I'll see in the next guides where we will basically style the rest of our application. And that will take care of all the little details after that. So I'll see the. [00:05:42][0.0]
[339.8]