the left side of our cell, and the right side of our cell where the description is.
We'll give it a nice margin bottom of 20 pixels or so.
And the maximum width of 250 pixels.
Let's go ahead and
take a look at the HTML of the menu item photo, right here, menu item photo.
And you see that we made the image responsive.
Well the image is 250 pixels wide.
We don't want the image to be any bigger than that, otherwise this is going to
become pixelated and the layout is probably going to get messed up as well.
So that is why we're saying that the maximum width it can ever go
is 250 pixels.
Don't stretch this element anymore.
Okay, then there's the menu item photo followed by a div.
Well let's take a look as to what we're targeting.
So the menu item photo is right here.
And the div is that kind of corresponding ID
of the menu that's corresponding to the restaurant's menu.
So let's go head and position that.
And obviously we're in position absolute, bottom zero, right zero so we'll be in
the bottom right corner and we're going to give it width of 80 pixels, the background
is going to be this greenish color, and we're going to center it within that div.
The text is going to be centered within that div.
So if we save that and go back to our browser
we see that it's now nicely sitting right inside of that picture and
kind of identifies for us what the menu item is.
Now I actually can see because of positioning of this element and
all the margins and all the different paddings that we're having over here
this whole price thing moved down quite a bit.
So now if we go back to the code editor,
I know understand why I originally put the margin here.
So let's go ahead and remove the comments here, because if I actually do need these
margins, to move up the pricing and make it a little bit nicer looking.
So when we do that, look at that.
It's aligned down nicely together with the picture.
This still looks kind of misaligned a little bit, but
we didn't work on that yet.
So, right now, the left side of our cell grid, both of them because they're
old class base so they apply to both sides or both grid cells.
They're looking pretty good.
Let's go back to the code editor and continue our styling here.
So, the description, so
let's move that down here and we'll go ahead and actually remove it altogether.
And here's our description so padding right is 30 pixels.
And the reason we're doing this is we want the content
of the item description to be moved a little bit away from the right either
element which is going to be a second cell in our grid or
if its the second one then we want to move it away from the edge of the browser.
The h3.menu-item-title and we're giving it some margins.
So let's take a look as to what we're talking about here.
So here is the h3 and
the h3.menu-item-title basically says, this is the title of our menu item.
And what we're doing here is we're giving it some margins.
So we're giving it top zero, right zero ten on the bottom.
And again the zero transfers to the fourth location.
So to the left of zero.
So basically we're just giving it a margin bottom really.
A fancy way of giving it a margin bottom of zero.
And possibly also zeroing out some margins that this item inherited from it's parent.