We can see that it is completely responsive so if you want to learn how to design this from scratch you can watch my previous videos i will leave the link in.
The description of this video and i'll also leave the link of the source code now in this video i'll show you how to add this pricing table to your blogger website so let's get started.
right here i am in my blogger dashboard and let's click on view blog and this is how our website looks and if you go back to our dashboard and if you.
Click on theme you can see that i am using this theme called contempo lite and it comes by default with blogger right now let's add this pricing table.
To one of the posts in our blogger website so let's click on new post and for the title i just type pricing of our product and now you can go ahead and add your.
View and here you can add your html css and javascript so let's go to the source code of our design all right this is the source code and.
Here you can go ahead and change all this content over here you can change the name the paragraph the price on all of these over here you can even add new features by just copy.
And pasting this list item and you can also remove features from here so in this way you have three plans over here so let's copy this html and.
Let's paste it in our blogger post so i just copy from here till the end till here so let's copy this and let's go back and.
I'll just paste it over here and now let's add the css so let's go over here and let's create a style tag and here in the style tag we will add.
The css Wesdigital
So let's go back to the source code and you can find the link of the source code in the description let's go over here to style.css and.Let's copy all the css so just select all and copy and paste it over here inside the style tag right now let's click on publish and confirm.
And let's see whether everything works all right so let's click on this view button and here we can see our pricing table is being displayed but we have some.
Problems in the styling first of all let's check whether the mobile version is working all right so let's decrease the width of the browser window.
And the mobile version is working all right we don't have any problems so the problem is with the desktop version now the problem is with the max width.
Inside our media queries so if we go back to our css and if we scroll down here we can see we have set a max width of 1000 pixels and if the width of the browser is less than 1000 pixels we are.
Adding all the css so if we go back to our original design now here we can see we have the full width of the browser window for the pricing table but in our blogger website.
We have this outer container and in that we have this pricing table so it doesn't have the full width of the browser window so for that we need to make some changes in our css so let's.
Right click over here and click on inspect and let's make some changes the first thing we will do is we will decrease the margin between these pricing tables.
So
I'll just scroll up and i'll just maximize this and let's select the table and here we can see.These are the styles for the table and let's decrease the margin a little bit so here we can see we have a margin of 0 for top and bottom and 16 pixels for left and right.
So let's decrease this a little bit and let's set it to i think 6 pixels or let's set it to 8 pixels and now we need to change the font size.
Of these headings so let's go inside the table and first of all let's add these changes to our blogger post so let's go over here to posts and let's click on this.
Post and let's go to the css and here in the table we need to change this to 8 pixels so let's change this and let's go back and.
The next thing we need to do is change the font size of this heading so let's select the heading and let's decrease the font size a little bit.
So i think 26 pixels looks all right so let's go back to the post and let's go to the heading and here instead of 32 we will set it to 26 pixels.
And let's go back to our post and we also have to change the font size of this price so let's select the price and let's change the font size a little.
Bit and i think 56 pixels looks alright and we'll also remove this padding top zero from here so that we have the padding at the top.
All right so let's make these changes to our price so we have the font size set to 56 pixels and the padding to 32 so let's go back.
And hear the price let's change this to 56 pixels and we'll just remove this padding top 0 from here and let's go back.
And the next thing we will do is we will decrease the font size of these features so let's go into features and let's go to the list item and here we have set the font size to 18.
Pixels let's decrease it and i think 16 pixels looks alright so let's change the font size of this list item to 16 pixels let's go back and let's find the li.
And here we'll just change this to 16 pixels and now this looks alright so let's go back and let's click on update and let's go back to our post and let's.
Refresh this page and now we can see we don't have any problems it looks alright let's view the mobile version and here we can see that the mobile.
Version also looks all right so that's basically how you add a responsive pricing table to your blogger website now whenever you add custom code to your blogger website you have to make.
Changes depending on the theme that you're using so for our theme we have to make those changes to our css you can go ahead and just right click and click on inspect and just play around with some.
Css values over here and you will be able to fix your problems 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 subscribe to this channel to get the latest video updates thanks a lot for watching have a nice day .