Video Summary

In this lesson we are going to mobile optimize the about us section. And this section is a little bit different than other sections because we kind of grouped in two different sections and and what do I mean by that is that we have we have like, you know this floating icon. We have these two cool pictures right here. We have a call out for 15 years of experience. We also have little paragraphs and call out sections here. We set up a time telling people how many customers are served and we’ve got this cool little button here. 

Now what we want and we also wouldn’t normally have to is we have these three call outs here. So what my thought is, is that let’s just hop into the responsive mode. And go to NFPA. If you’re already here, just click on responsive mode. And let’s go to tablet first and to see everything looks and then we’ll jump over to mobile. So let’s go to tablet. 

We scroll down and we still got this cool little fix right here. We got 50 years experience I think that kind of works and stands for itself. And I like how this section right here you know goes into talking about talking about just the company got the call outs of you know, large inventory, free insurance quotes B. We didn’t really edit that for this website. But these are the call outs that we’re working with right here. We can change those fonts or those words up anytime. But the idea is, is that we want to just make sure that this looks the best it can on the section so we have that then we go into our three call outs here. But here’s a cool thing that I think would look a little bit better as if you were scrolling down is if we were able to switch this picture and this paragraph section here through flip flop, just for the tablet view. And we can actually do that right here from the editor. So what we’re going to do is we’re going to click on this section here to make sure that we’re highlighted and if you don’t know what you’re actually setting up, don’t want to feel or feel or don’t be scared to hop back out to the desktop view and click that word we are setting up these two sections right here. Right? We’re gonna do is we’re gonna go back down to the tablet and while we have this thing, this section is selective. We’re gonna go to advance, right click here on responsive. And right here, we can reverse columns on tablet. So let’s reverse was click that. And now we’ve just made the switch. So we just flipped them, but this is kind of over lapping this button right here so I don’t really think that’s going to work as it is, but that’s okay because we can click on this this section right here and we’ll put some extra padding. Right because we got the padding right here or actually and stuff padding I want to use margin, the margin would be a little bit better one because margin moves the whole thing down and padding. This gives us an extra space. And if you want if you want to review what padding and margins the difference between the two, feel free to go back to the CSS portion of the course. Because we’ll talk about the margin padding there. But for right now I think the top let’s just try 25 pixels and see how that works. And I’m gonna back this up because I want to make sure that just the 85 think that’s good. It’s still overlapping when it bumps up. So maybe if we made if we take this from 25 to 35 and let’s try 45 I think that looks good. That looks good. So now as we’re scrolling down, we see there, I think that looks great. But we also choose we have we have a big white white section right here. So if we kind of hover over let’s just let’s click on this section, and see what our padding looks like. We got ADD. Let’s take this, see what zero looks like. We got that there. And here’s here’s kind of a it’s kind of a cheater trick, but we can try to go negative with it. Sometimes that will work sometimes that won’t sometimes if we try this for the margin, sometimes that works. Sometimes it doesn’t. No, that doesn’t work, it would have to be padding. So what we’re going to do is let’s try to save some of this whitespace so if we hover over to see where listen because let’s see what this columns will be. We click on this and see what our padding is here. Let’s take 30 off of here. All right, perfect. So what we did is we this there was an extra nurse and access padding for this. 

Alright, so we’ve made this really small and it hasn’t set up anything different. So I think I’m going to do is I’m going to revert back to fault on both of these or revert back and I have a cool trick too. I think we can still save us the cool floating icon and be able to see the two pictures but we’ll just take we’ll get rid of this 15 years of experience. Alright, so what I’m gonna do is I think everything else for the rest of the section and let’s just double check. We go back to the tablet, make sure our settings are right there. We’re good there. We got this we got the these two sections right here flipped and if we go back to the desktop, we go back to the normal spacing or the you know the normal order was in or the original.