In a previous lecture we saw that there was a bit of a problem with our layout
when we went from the wide screen to a little bit more of a medium screen.
So let me show you what's going on.
So if I go over here and I cross the 1200 pixel break point.
This thing jumps and it goes over here.
And that kind of looks unseemly.
We really want this a little bit higher up.
Well, the reason this is happening is because this DIV right here and
this DIV they're both floating, and since we're kind of running out of room on this
one row, just like any other float element it just gets pushed to the next row.
And it's still floated right, so that's why it's still over here and
not moving over here.
So let's verify that.
Let's go ahead and select this right here and that's our header navbar-header.
And if we decrease its width, let's say 400,
and you can see it jumps over here, right.
So since we made this smaller.
It jumped over here.
Well, let's refresh that for a second.
We really don't want to decrease the DIV, the entire DIV.
What we really want to do is actually make this logo a little bit smaller.
It's kind of a candidate to be made smaller, anyway since we have a smaller
screen and we want to make the image a little bit smaller, and
also kind of save a little bit of bandwidth as well.
So, let's go back to our code editor and
I'm located in lecture 33 in the after folder.
I'm going to bring up my styles that's CSS and obviously we're up to break point,
which means we need to write our own media queries.
And I kind of wrote out some of the media queries we're going to need right here and
we're going to have a media query for
large devices with minimum width of 1200 pixels.
And as going to be a medium device with a range of between 992 and 1199.
The small one is going to be between 768 and 991 and
extra small will be Basically max width is going to be 760 pixels.
Now I didn't make these up.
I actually took them verbatim from how Bootstrap subdivides and
creates it's break points.
Okay. So what we're targeting at this point is
the medium devices one.
And I already have some code that I could just copy and
paste over here that will make our logo a little bit smaller.
And here it is.
So we're targeting our logo image.
And we're changing out the background image URL to a different logo.
It's a different file.
It's restaurant-logo_medium.png.
And it's smaller in size.
So before I think is was 150 pixels by 150 pixels.
And now it's a little bit smaller and
the padding perhaps is a little bit smaller as well.
This is something you basically have to tweak a little bit yourself.
You know there's no point of doing this on screen once it looks good,
then you're good to go.
So let's go ahead and save that, and let's go look at our browser.
And viola, look at that.
So now, we're much better shape.
We can see that, this thing shrunk,
this logo shrunk and therefore it gave us enough room here to have a few buttons.
And now if we squeeze it at certain point,
at the small break point right here, the logo will completely go away and.
This will at this point not fit here anymore and
it will slide right under our brand name or the name of the restaurant.
And actually this look pretty good some okay with that and
not really having to fix that because, this to me it looks nice and compacted.
And as we go closer, there's something still needs to be fix but
at the medium and the small break point, we're now good to go.
So in the large break point, we're also good.
You could see the image keep switching sizes at this point so we're good there.