Alright, welcome back guys. Now let's adjust this hero section for the mobile view. Okay, because now as you can see, when I add just a browser, this thing, this hero section becomes very weird. As you can see the arrows are here. And this becomes very tiny on a mobile phone, it will look very weird. So let's adjust it.

Okay, let's open here. Select the section, go to advanced and open responsive here. Hide it on mobile. All right. Now, we need to go through that process, again of creating the templates and all that thing. All right, so let's create images.

Let's create templates again, so drag an image here. Alright, and make it full. Select the image. Let me upload it mobile. So in your exercise files, there is this mobile folder. And these ones are cropped for mobile.

Okay? So we need to make different assets for mobile. Alright, so let me just upload all these open. Okay? select this one, insert media. All right.

Now, let's make the link custom URL. Go here, men. Copy and Paste. All right. Now let's make it full width. So select the section from here.

Stretch section content with full width columns gap, no gap. All right, it is full width Now let's go back and see if this Save as template. Mobile hero one. Okay Save. Now let's replace this image with this one insert media and the link with this one. Copy and Paste.

All right. And save section. Save as template. Mobile hero and save. Alright, now let me fast forward it from here. Now that I'm done saving let's close this and update.

Okay, let's refresh this now Bring the premium carousel premium carousel and drag it below in the drag it here. Alright, we have the premium carousel. ads make it full weight, columns gap, no gap. Yeah. Now select the premium carousel content type repeater templates content. Mobile hero one Add Item mobile hero to add item mobile hero three, mobile hero four and finally mobile hero five.

All right. Now let's select the mobile view from here. Alright. As you can see, we can see the mobile and this is our carousel. Actually, this one is the desktop one. Okay, let's remove the door.

First so dots No. All right. Arrows we don't want the arrows as well. Okay. Appearance light settings in finite loop years fade on zoom effect no transition speed 800 and animation fade in. All right style update changes to pay.

Okay, apply. Let's go back to the mobile view again. Okay, just think of it. This thing is a bit slow. Yeah, here we are. Let's select the premium carousel.

Oh, update the page. Now style. Do you want to change anything in this tile background type background overlay? Oh, actually, no, I don't want to change anything. It is updated. Let's look at let's look at this on this web page.

So let me Okay, I think I need to refresh it. Refresh. All right. As you can see, this will change. Yeah. Okay.

The thing is we need to hide this one on desktop. Okay, so let's go back here. Select this, go to advanced, responsive hide on desktop and update. Okay, let's go back and check. Yeah, it's gone. Now there is this point where we can see both of these Okay, so that's because it is visible on tablet.

Right? So let's hide this on tablet as well and update. Okay. And let's refresh this and check again. All right. As you can see, it will change here.

Yeah, it changed. Alright. So that's how we make a responsive element on our webpage using element or right. Now you can make one for tablet as well. Okay, now that will be all for this video and I will see you in the next one where we will continue building our homepage. All right, so I'll see you there.

Bye.