Is not optimized for a mobile screen so if i decrease the width of this browser window we can see this is how it looks we cannot see the whole pricing table so in this video we will add some media.
Queries to our css and we will make it look good on a mobile device so let's get started all right this is our progress as of now.
And we have designed this in the previous video so if you haven't watched it you can watch it i will leave the link in the description of this video right now let's go ahead and add a media.
Query so i'll just tap at media and we will set a max width of 1000 pixels so now in the browser window is less than 1000 pixels all the css that we.
Have inside this block will be added to the page all right now the first thing we need to do is we need to set all these tables one below the other so let's target the container division so.
If you scroll up here we can see we have this pricing table container so let's copy this and let's scroll down and let's paste it over here.
And here you have to type flex direction and set it to column and now we can see all these tables are one below the other now let's bring everything to the center.
So i'll just type align items to the center and let's also have some gap between these tables so here we'll just type gap.
And we'll set the gap to 42 pixels and now we can see we have this gap between these tables right now let's style the table so let's type pricing table container.
And table and if you scroll up we can see that for the table we have set a width of 300 pixels so let's scroll down and here we will.
Set the width to Wesdigital
90 of the screen size and now if you increase the width over here we can see that it increases the.Width of the table and it sets the width to 90 but we will set a limit to the maximum width so here i'll just type max width and we'll set the max width to 500.
Pixels and now even if you increase the width we can see that the max width will be 500 pixels right now let's style this heading so.
Let's type pricing table container h2 and we will set a margin bottom of 8 pixels and i will also set a margin top.
Of 8 pixels and now let's decrease the size of this price so here let's type pricing table container.
Price and we'll set the font size to 50 pixels and right now we have a lot of padding to the top and the bottom so i just type.
Padding and for top and bottom i'll set the padding to 12 pixels and for left and right we will set the padding to 32 pixels.
And now it looks pretty much all right we'll also add some styling to these list items so let's type pricing table container and features ulli.
Because if you go back to the index.html file we can see that we have this division with a class of features and in that we have the ul and in that we have the list items right now for the.
List items i just set a margin of 0
And will also decrease the font size and i will set it to 16 pixels and i think that looks alright for a.Mobile device so this is how it looks for a mobile version and if i go back to the desktop version this is how it looks let's also check how it looks on.
Different devices so let's right click over here and click on inspect and you can click on this button called toggle device toolbar and now we can select different devices.
Over here and we can see how it looks over here so this is how it will look on the moto g4 and let's select another device let's select.
Iphone 10 and this is how it will look on an iphone 10 all right so that's basically it with the responsive version of our pricing table now i will leave the link of the source code in the.
Description of this video so you can just copy and paste the code to your website and in the next video i'll show you how to add this pricing table to your blogger website so that's 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 subscribe to this channel to get the latest video updates thanks a.