started so let's go to the styler CSS file and uh the first thing we will do is uh we.
Will add a font size of 30 for all the H2S so here we can see we have this H2 for the heading so let's tap H2 and let's set the font size to 30 pixels right now for each of the.
Sections let's add a padding in line which is padding left and right of 30 pixels right now here we can see we have this Services section and it is inside this.
Uh division with the class of services container and in that we have all these services so right now it is set to two columns in a row so let's select the services container division so let's T.
Column so with that we have completed making our services section responsive now let's move on to the next section which is this about section right here now for the about section we want the.
Image to be on the top and the text at the bottom so if we go back to the index.html file here we can see we have this about section and that we have this content and in the content we have the.
Left and the right sections so right now it is a to display of flex so if we scroll up and here we can see for the about content it is set to display of flex now.
Let's set the flex direction to column so that the image is on the top and the text content at the bottom so let's type hash about content and flex.
Direction to column and now let's set the height of the image so let's St about cont IMG and let's set the height to 300 pixels and object fit to cover so that.
- Python Part 13 - Error-trapping Office
- SWOT TEMPLATES - Free Download Office
- 540+ Professional Business Card Files Sheri Sk Business Cards Templates Download Office
It has the correct aspect ratio and - ID Card Make
Let's also set the width to 100 vport width right now for the right section we need to have some padding so let's type hash about right and let's set the.Padding to 0 30 pixels right now let's move on to the next section which is this block section and if you go back to the HTML file here we can see that we have this cards.
Container over here so let's select that I'll just tap do cards container and let's tap grid template columns to just 1fr and let's also add some gap between the elements so let's tap gap of 50.
Pixels and with that we have made our block section responsive now let's move on to the testimonial section so so for the testimonials section we have this swiper.
With a class of testimonials swiper so let's go ahead and Target that I'll just tap testimonials swiper and in that we have this swiper slide so let's tab dot swiper.
Slide and let's set the padding in line which is padding left and right to 50 pixels and let's H the padding block which is padding top and bottom to zero right now let's H the font size of this.
Paragraph So let's Ty testimonials swiper swiper slide p and let's set the font size to 18 pixels right now let's style these buttons so let's tap testimonial swiper.
And we have the buttons with the class of swiper button next and Swiper button pre so let's St testimonial swiper swiper button pre and let's set the padding to 8.
Pixels and uh let's set the width and the height to 40 pixels now let's add a little bit of padding to the content as well because the content is touching this.
Arrows so here we can see we have this
Content division so let's type testimonial swiper swiper slide content and let's set a padding in line of let's try 20.Pixels and and I think that looks all right so with that we have made our testimonial section responsive now let's move on to the next section which is the contact Section now.
We want to have these two input Fields one below the other now if you go to the HTML file here in the contact Section we can see that we have this group Division and in that we have these two input.
Fields now we have set the display of this group to flex so if you scroll up here for the contact Section here we can see that the display is set to flex now we can simply go ahead and.
Set the flex direction to column so let's tap hash contact group and flex direction to column and with that the contact Section is done so let's scroll down and here we.
Have the footer so let's Ty footer and we want all these sections to be one below the other so if you go back to the HTML file here we can see inside the sections division we have the left.
Section and then we have the Center section then we have the right section so let's type dot sections and let's set the flex direction to column and we'll also text align it to.
The center and let's set a gap of 30 pixels and now these social icons are not exactly in the center so for that let's go ahead and select that I'll just have.
Footer and uh they are inside this socials division slab. socials and uh if we add the background color over here we can see that it has this full width so we can.
Just simply go ahead and type justify content to Center because it is already set to display of flex and now we can see that it is in the center so with that we have made our footer responsive.
As well and in this way we have completely made our website responsive so that's basically it for this video if you have any doubts you can ask in the comments below and if you.
Like this video please click on the like button and And subscribe to this channel to get the latest video updates thanks a lot for watching have a nice .
