All language subtitles for 16. Creating The Information Block Continued

Now let's start creating the contact us section for this and it will start by actually copying this

entire grid item the entire grid item above the info background div.

But within our container that whole grid item for the About Us section and we're going to paste it another

one right underneath what's come and change this title here to contact us and I'll change the subtitle

to say hello with an exclamation mark.

And then if you're on Mac you can do control command space to open up the emoji menu and I'm going to

use the hand emoji just because I like the way that looks.

I think it gives a little bit of a playful touch and just adds a little bit of personality.

But yes Lin says the images should be wrapped in a spam tag and have a roll of image and have an accessible

description with Aria label.

So let's go ahead and wrap the emoji in a span tag and a closings span tag.

And then I'll add a roll here of image and an aria Aria label label equal to waving hand but you don't

have to include the emoji if you don't want to.

I just think it looks good.

So let's go ahead and save this now to see where this gets us and you can see now that those grid items

are sitting on top of each other.

So that's definitely not what we want but since they both have a position of absolute Well that's what's

going to happen.

So instead of setting the position of absolute on both of these items when we need to do is actually

wrap both of these grid items and set the position of absolute on that container.

So let's go ahead and we'll create a grid item container here and we will copy both.

We'll actually cut both of the grid items here all the way down actually.

So it's easier sometimes to start from the bottom so I can see where these and we'll copy both of these

grid items for our about us and contact us into this grid item container.

And now we can go and remove these style and position of absolute for both of these come and get rid

of those and now will add a style position position of absolute on our container.

So let's go ahead and we'll save this.

The page will refresh and now you see that we have our items separated.

We have this little gap between them though because our Contact Us style has the margin left that we've

been using on about us to create our little border here.

But we're actually not going to want that on the left side of contact us will want that border on the

right side so that when we get it pressed against the right edge of the screen it creates that same

level of border.

So let's change this margin left to a margin right.

And we can save that.

See the page refresh.

And now the space is gone and there's a hidden margin over on the right.

So to get our items spaced all the way over there you think we might use our justify property but we

can actually do this a little better and make it responsive at the same time.

If we go ahead and on each of the grid items.

So the grid item with the style margin left for about us.

Let's add the small property to that and then we'll add the small property to this grid item with margin

right for contact us as well.

And by setting these small property with no actual fixed value on both of these items we're setting

it to auto.

So each of these grid items will share the available space within their container.

So if we go ahead and his save the page will refresh and now the spacing has changed so that they're

actually each taking up this big block of space.

But we want the contact us to all be on the right side of this.

So what we need to do is.

Next to our margin right style.

Let's set our text aligned style to right and we can go ahead and save that and see the page refresh.

And now all of that content is being aligned to the right side of the space that they are both sharing

equally.

And this creates the exact layout that we had been wanting.

So you can imagine that each of these about us and the Contact Us sections there each sharing 50 percent

of the screen available here.

Thanks to these small properties so they're each sharing the available space and getting half of it.

But within that half that they own the about us is aligning to the left side of its section and the

contact us is aligning to the right side of its section.

So that's what gives us this nice spacing and we'll hope to make sure that they share the space available

as we resize the screen but start to see how this looks when we resize the page and we'll start putting

in some styles to help us there.

But we can see if we make this size all the way big they perfectly share this space and it just looks

great really expanded exactly how you would expected to.

And we can start shrinking it down now and we'll see them perfectly share the space and continue to

shrink all the way until we get to here.

So now they're touching and as we continue to shrink down to the smaller screen size you see it kind

of does this pretty strange layout here.

And that's because it doesn't have enough space for each of those sections to share the screen size.

And so when it goes to stack them on top of each other the contact us section it has a margin right

not the margin left which creates the little space here.

And so the Contact Us gets pushed all the way against the left side of the screen where the About Us

stays where it is.

And it just looks all janky.

So we definitely need to take care of this.

And I think the my preferred solution would be instead of to just continue shrinking them down to where

they're now touching and then it does this.

I think for the smallest screen size we should just make sure that these are stacking on top of each

other and centered like we have done for all of the other elements at our Mobile's size.

So the first thing I want to do is actually reduce these margins if we're at a smaller size.

I'm definitely not going to want those to be pushing our sections as much as they are and by reducing

them they will actually make sure that they don't squish together as quickly either.

So if we come up and in our margin left property let's check our matches.

S M variable and if that is true let's change the margin to just to m.

Otherwise we'll leave our 5 m value and let's go ahead and do the same thing for the margin right on

our contact us section checking the matches S.M. putting a 2 m margin if it's true and otherwise leaving

our 5 m value.

So let's save that and we'll see the page refresh.

And now you can see that there's a much thinner margin which allows the items to share the space down

to a smaller screen size and you can see where they're still touching here and this is where we actually

now are going to want to stack them on top of one another because that usually is what you would expect

from mobile and definitely looks better than if we just tried to center this and still have them squished

together.

So on this wrapping grid item container where we set the style of position absolute and remember this

is wrapping all of the about us and contact us sections here.

Let's add a direction to it.

And right now it's defaulting to row and that is why we have the about us section on the left and the

contact us section on the right.

Well let's go ahead and we'll set this equal to a ternary statement and let's check our matches.

S M variable and if that is true then let's go ahead and we'll set this to column.

So if we are at a small screen size being laid out from left to right these should now be set up from

top to bottom.

And if we are not at our smaller screen size let's go ahead and provide the default of row.

So let's go ahead and save that now and we'll see the page refresh.

And now we've got our items stacked on top of one another if we resize the screen we can see as we make

it larger then it will reach the point where they're now back at the same level.

But we can continue to shrink down and see where they then stack at a column layout.

But we're not finished here because I don't want them to still just be kind of a staircase like this.

I want it to all be completely censored but only here at this very smallest screen size because up above

this size it actually looks like we have enough room for the items to share the space pretty comfortably.

And so I think this is shrinking it down.

Say at this size.

If we were to censor it up it wouldn't make much sense because there's still plenty of room between

them but as we get down only to the very smallest size is when we need to stack that.

So what I want to do is come up to the top and underneath where we check our small media query let's

copy this and I want to paste another and let's change it to matches x s and change it to the extra

small breakpoint and it will scroll back down now and where we had set the direction to column or row

instead of the matches S.M..

Let's actually just make that the matches extra small breakpoint.

And now to make sure all of our text aligns correctly.

Come up in on our style for this container.

Well let's set the text online for all of the text within the container to check our matches.

X x x s variable.

And if we're at the smallest screen size let's make it centered and otherwise we'll leave it to inherit

wherever it was doing before and then down here on our grid.

Item 4 contact us where we're aligning the text here to the right.

Well on our smaller screen size when we're then going to be censoring everything we don't want it to

always be right.

So let's add a matches x s and if we're at that small screen size we'll center it otherwise we'll read

it as right let's save this and see how this is looking and we can now see that it looks really good.

The items and text are now all centered in the screen at this small screen size but they are a little

bit offset.

We've got this little spacing here and that's coming from the margin left that we are still setting

for these smaller screen sizes.

So what I want to do is we're going to use a nested ternary statement and in front of the matches S.M.

we're first going to check for the matches x x x s variable and if that is true we will simply get rid

of the margin entirely.

Otherwise we will go to check for our matches S M variable let's come and we'll actually add that to

the margin right for the contact us section as well because you may not be able to tell but that's pushing

the margin here as well.

So we'll add our matches x s check and if it is well 0 it if not we'll go and follow the logic.

We had already set let's save this.

Now the page will refresh and now we've got very nicely perfectly centered items.

And as we go and upsize the screen we'll see it jump to where they're perfectly sharing the space available

and continue to do so all the way up to the largest of screen size.

So this looks great now.

They're perfectly sharing this all the way down.

Really looks good never getting too close to each other or the edge and the only thing that I think

we could do now is maybe put a little more spacing in between these two items when they are on top of

each other.

So to do that on our grid item container that is wrapping both of these items we can add a spacing property

which will check are matches x s variable.

So if we are in the column layout stacked on top of each other let's have a spacing of 10 otherwise

0 which is the default.

So we'll save that.

The page will refresh.

And now you can see we've got a nice bit of spacing between them.

But when we size back up and they share the space it goes back to normal.

So I think that that is perfect.

I think we've perfectly made our responsive info section.

It was a little bit of work but I think it looks really good.

It's a nice layout.

It's definitely different.

And we keep getting more experience with different ways to use the grid and its different properties

and the responsive system to change those properties to constantly create the best user experience possible

though we've done a great job almost completely finishing the home page.

Now there's only one very last part to top it off the call to action which will get started in the next

one.