All language subtitles for 10. Creating The Services Block - iOSMobile App Development

Let's create the second services section.

The IOW slash Android app development section.

Now I realized I've actually kind of been calling it the wrong thing so far I've been putting in the

services menu mobile app development as well in the footer mobile app development but I'd actually like

to call it IOW slash Android app development because I think that's just a little more clear to people.

So let's go to our header real quick and in here we can scroll down to where we have are menu options

constant and where we have the mobile app development option.

Let's just change that too.

I Os slash Android app development and we'll leave the mobile apps path because that's an easier path

and I think that's why I'd gotten it confused.

So let's save that and page or refresh and we can see that now we have Iowa's slash Android app development

so that looks pretty good.

And we can come down to our footer and for a footer let's come down to where we have the custom software

development mobile app development and Web site development items and change it here to IOW slash Android

app development.

So save that.

And now we have the footer corrected as well.

So now we can close out of the footer close out of the header and return to our landing page.

Dot J.S. what's come underneath the custom software icon.

And let's go ahead and already import the mobile apps icon from assets mobile icon mobile icon and now

we can come back down to our services block and we're going to copy this entire grid container so the

entire custom software development section from the grid container direction of row all the way down

to this third to last grid item tag.

So I'm actually in the start here at the bottom so easier scroll all the way up to there.

Actually we're going to take the entire grid item.

Sorry had that wrong.

So the whole grid item and we're going to copy that and so we'll actually place an entire new grid item

right underneath that.

So let's go up and where we had the services block actually change that to the custom software block

and then come down here and the item that we had just pasted will be our I Os slash Android block.

We can come down to the H for typography variant and what's changed the title here to OS slash Android

app development and we'll change the first subtitle to extend functionality extend access increase engagement

and then we'll come down to the second subtitle and we'll change this income all the way to the span

and set that to integrate your web experience or create a standalone standalone app in here insert some

javascript and we're going to check the matches S M breakpoint and if we are on a small device let's

go ahead and leave it at No.

But otherwise I want to have a line break in here and that'll just make it look a little bit better

for bigger screens.

But then when it shrinks down to being centered on smaller devices the line break won't be there and

it will resize appropriately.

So we'll finish this out with either mobile platform let's save this and we'll see our new section up

here and there we go right underneath here you can see that we've got the Iaw and Android app development

section but it still has the custom software icon and it's not in the right place either because we

want this one to actually be over on the right end of the screen the push this section over to the right

end of the screen we're going to change the justifying property for this row and the small break point

when that is true.

It's set to center but otherwise we're setting it to undefined and we should actually change that now

to flex end so that it will be by default at the end of this containers main axis which will be the

horizontal direction pushing it over to this right edge but we'll still leave the appropriate center

styling for when we're a smaller screen size.

So let's go ahead and save that and we'll see it.

Now jump over correctly let's come down and change the icon as well.

So changes now to our mobile apps icon and change the alt to mobile phone icon as well.

Now we can save this and we will see our new icon has appeared this already is almost perfect because

we had everything already set up from the custom software development section but you see that we have

this time it's squished all the way up against the right edge of the screen you see there's no border

over here where we have that border here on the left side of the custom software block.

So we need to add a little border to the right side of the Iaw and Android app development block if

you remember we created that little border here with this margin left style so on ah I was an android

block.

Let's go ahead and cut that style off of the grid item here and we actually want to place that on the

grid.

Item wrapping our image so that way on the icon here we'll get the border to the right side so we'll

add these style prop here and we'll paste in the style that we had copied.

We can remove that comma and we need to change it from a margin left to now a margin.

Right.

And that should add the space to the right side of the container of our image.

So we'll save that.

See the page refresh.

And now we've got a nice five m border over on the right side.

Consistent with our little border on the left.

And you can see as I resize this it's still spaced appropriately and now as we start shrinking down

you'll see that they move in together quite nicely.

And when we hit the correct breakpoint they will center up and now they will continue to resize all

the way down.

And you can see they already resize is correctly thanks to the styles set from our previous section.

So that wasn't too hard to get set up.

And let's keep that ball rolling real quick and finish up the services section with the Web site block

in the next video.