Hello everyone and welcome back to our bootstrap course and this lecture going to be fine tuning our
contact form.
Now it's important to note that your contact form and your whole website will look different on different
browsers.
For example if you're using GSP which is a live preview then you can see a different styling whereas
if you tested it on google chrome you'll see a different styling.
If you tested it on Firefox you'll see something different et cetera.
So it is important to test across browsers.
For example if you're using an idea you like brackets which allows you to have a live preview that life
preview will also be a bit different from if you tested the exact same files from Google Chrome.
So it is important to know.
Let's go ahead and fix this for how it looks for us so we can test our fine tuning skills.
Right now we have a bit of a padding issue on the left and right.
So we can go ahead and fix this.
So as you can see on mobile there is too much padding on the left and right of our contact field so
we can go ahead and fix that by hiding the output and go up and change the padding here.
Now we have our p set to five up here which means the padding at the top left right and bottom will
be five which is 80 pixels about.
And this is a responsive amount.
However we can find to this by setting the P Y to five but setting the p x which means the left and
right panning to something like two instead which will decrease it.
Okay.
We can go ahead and test this and see how it looks now.
You will find that a lot of front end development it does involve a lot of testing to see how something
looks before you find the perfect numbers here.
So if you click on the output and then scroll all the way down you'll see that now we have all the text
centered and it's more aligned in terms of on the page and there is less padding on the left and right
and this message text fixed where it's positioned and the text is now all centered.
So we just had to adjust those numbers and we can hide e UML fields is how it looks now.
We have emails set aside here so you can play around with this and see what you would like it to look
ideally but other than that.
Thank you all for watching.
We now finished our template here we have our fix that navigation up here with it logo and a toggled
not navigation bar and we have our company name with some descriptions as well as a carousel ready for
images and our service pages here as well as our contact form.
Now what we're going to do next in the next lecture is add a footer.
I encourage you to play around and test different stylings of the contact form before we get on to that
and go ahead and try to add a footer yourself before we show you some in depth for styling.
Other than that thank you all for watching and we will see you in the next lecture.