All language subtitles for 14. iOSAndroid App Development Page - Responsive Design

Let's keep building out this page and we'll start by putting a max with here on the animation so that

it doesn't get quite as large especially when we get up on to this size.

You can see that it's huge now and we definitely don't want that.

So let's go ahead and on our lady component.

Let's add a style of max width of 20 m.

We can save that and we'll see it jumped to a much smaller size which it will never grow larger than.

And I think to that looks way better way better than that huge version.

Now we can move on though to the next part of this page which is that row of icons.

So underneath this grid item container of row for the integration and simultaneous platform support

row let's add a grid item container direction of row with a class name of the classes dot row container.

And then let's open that up inside of here.

We'll have a grid item container direction column for each of the icons in their titles.

And we know that we'll also want all of these sections to be sharing the space available to them.

So we're also going to add the medium property.

So let's add a grid item container with a direction of column and then add the medium property and open

that up.

This is going to wrap a grid item containing our typography variant of H four with the gutter bottom

prop.

And this will say extend functionality OK and then under this grid item let's add a grid item wrapping

an image with a source of Swiss and an old of Swiss Army knife.

And then we can close that off.

And that means we need to import Swiss now.

So what's come up under the arrows and we'll enforce Swiss from assets.

Swiss knife and we'll scroll back down and let's save the page actually so that we can see and wow our

icon already looking great popped up on the page.

So let's go ahead and we'll take this item container direction column.

Make sure you grab that closing tag and let's copy that entire thing and paste it two more times under

here let's change extend functionality in the second one to extend access and then extend functionality

in this last one to increase engagement and get capital engage mint.

This means we need to come up and let's in for a couple more icons.

So we'll import access from assets slash access extend access actually extend access dot as V G and

then we will import engagement from assets slash engagement increase engagement.

So increase engagement and extend access.

But I just brought them in as access and engagement.

And now let's scroll down to where we're using the images and change this the second one to access change

the old to a tear dash one off sign tear one off sign and change this last one to engagement engagement

and change the Ault to app with notification so let's save this and we'll see the page jump and all

of our new icons have appeared but not properly.

You see that we're definitely have some styling to take care of let's first make sure they are title

in the icon are centered with one another and so on.

The grid item container direction of column here.

Let's add in a line items items of center and we can go ahead and copy that on to all of these grid

item columns.

We'll save that.

And now all those icons are being centered let's also go ahead and on each of the typography components

for these titles.

Let's add the line of center as well just to make sure that these are all perfectly center aligned so

you can save that.

And I think that that jumped a little bit.

Maybe I'm just being overboard but that's OK.

And now let's go ahead and this extended access image obviously way too big.

So here on that access image let's add a style style of max width twenty eight m and we can save that.

And now that's a much much more appropriate size.

And this actually already looks really good and this looks really close to the design file already with

all of our content properly on the screen.

Now we can start working on making it responsive so you can see the header already has a style to jump

over and be centered on this medium breakpoint but all the rest of this is still way too crammed together.

So let's start working on the responsive design for this.

We know that we're going to want all of these items to be stacking on top of one another when we're

at the medium breakpoint.

And so instead of the direction of row for row containers let's change this to a ternary statement.

Checking our matches M.D. variable.

And if so then let's add the column layout otherwise stick with the row and we can go ahead copy that

direction and put that on our row container for the integration and simultaneous Platform Development

section as well.

Make sure actually you overwrite that row property instead of adding a second one.

We can save this and that page will refresh and now everything is being stacked on top of each other

although definitely still have some more work from here.

Let's get some spacing going and how all this is squished right up against one another even on the larger

break points.

This is all still squished to each other.

So let's add in margin top and bottom to this row right here.

The integration and simultaneous platform support sections because a margin top and a margin bottom

will create a buffer around all of the other content.

So on the same row container that we just added the direction of column and or row two.

Let's add a style here of a margin top 15 m and a margin bottom of 15 as well.

You can save that.

And now the page is already looking way better with that extra whitespace we do still needs more the

bottom because this row is just sitting against our footer.

So let's find the row container for this last row and add a style of margin bottom set to 15 m as well

so we can save that.

And now we've got spacing down here and this is all looking really great already actually let's go ahead

and we'll shrink this down again though.

Back to our medium break point and hear how all the icons are squished together just like we've done

for the previous icons.

Let's add a margin top and bottom to this middle one to Space those out.

So on this grid item container for extend access let's add a style here with a margin top of matches

medium because remember we only want to apply this if we're in the style where they're stacking on top

of one another.

So if we are that small breakpoint let's add a margin top of 10 m otherwise we'll leave it set to zero

and we can set a margin bottom property to the same value.

So margin 10 m and then zero otherwise so let's save that.

We'll see the page refresh.

And now those look great.

Much more spaced out and that really makes such a huge difference.

Now let's actually come back up to this container here and I think see if we open this up I think we

could actually probably still allow these to share the space next to one another even at this smaller

break point I think we might still have room.

So I want to actually come up and we'll try this.

So let's create under the matches medium a constant of matches small OK we'll use a media query theme

or eight points down for small and then we'll come down to the container where we had set the direction.

So here we set our direction for it to be column if we're in the medium let's actually said that two

matches small so they once were in the medium it will actually stay as row so let's save this and we'll

see the page refresh.

And now if we resize the screen when we get down to medium you can see that they're still sharing the

space available.

And as I continue to shrink this the text actually just gets smaller.

So you see the text gets smaller the animation is shrunk a little bit and they're doing that so that

they can share the same screen space.

And I think that even all the way down to here are small break point.

I think that this even looks fine and is really probably the best looking option that we would want

for say like an iPad.

Now once we have crossed over and we are in this smaller breakpoint we need to make sure that this is

centered and looking appropriate like all the rest of the items.

So what's add on all of these typography components in online property checking the matches small variable

and if that's true let's set it to center.

Otherwise leave it on defined.

Let's go ahead and copy this online property onto all of our typography is for the integration and simultaneous

platform support sections and make sure here when we paste it that they already had the value of a line

right as the default.

So let's paste that in and change undefined to right.

And now we can copy this property overwrite these aligns paste that in and save.

And now you'll see that the text is centered up and that works much better for a mobile device if we

go ahead and shrink the screen now you'll see that that text continues to adjust itself based on the

screen size constantly taking up the best space available to it.

So this looks really good except once we're down here extend access.

Image is actually a little bit too big.

I think it looks a little bit too large here and actually on any screen size that's smaller than this

page it will actually be a little too cramped.

So what's come up and what's scroll until we find the extend access image and here we reset the max

width of 28 m.

What's actually changed this to check the matches x s variable and if we're at the extra small breakpoint

let's change this to just 20 m otherwise we can leave it at the 28 M and if we save this we'll see the

page refresh.

And now on our smaller size it looks as much smaller as well.

And that really just creates a better feel for our mobile devices with that though the page is finished

we already quickly put all this together and what maybe you look like an interesting and kind of complex

layout at first turned out to be extremely simple to get set up and this looks really great.

Constantly adjusts for the size and is perfectly responsive all the way down until the bottom.

So the last finishing touch that we need to do of course is let's come up underneath our animation import

let's import the call to action from DOS slash UI slash call to action.

And at the very bottom of our grid with only one grid item underneath create a grid item wrapping our

call to action calling it with the set value prop of our props set value and we can close that off save

the page and that will refresh giving us our nice responsive call to action.

So everything is working great.

It's so convenient having that as its own component makes it so easy to just slap into any of the pages

that you need.

And this really just keeps coming together quickly and the ball.

I feel like his kept rolling pretty nicely.

We've got a good momentum going.

We've been able to get a lot of stuff done.

And once we finish the website's page will actually be halfway done with the entire site.

So we really have made it a long ways but there's still plenty left to do.

So let's keep working and I'll see you there in the next one.