Sometimes you want to make changes to your website’s CSS using the developer tools of the browser. So let me go to my inspect element here and I’m going to play with how this grid looks like in one of my websites.
I think I want to maybe dig in here and let me go to the loop container wrapper here.
And I think I will make this into a display grid.
And then I will define grid template columns.
Repeat four times for 25%.
And then I think I’m going to take away the clear class from here.
And I will disable float left here.
And I don’t know where this block comes from but I will make this display none.
Anyways, let me speed up the process of making all kinds of changes and tweaks to my CSS.
Now when I’m done, I would like to copy all the changes to my CSS file. But it’s kind of hard to even remember all the elements I should check for my changes.
Luckily there is a tool that is perfect just for this situation. Next to the console tab under the three dots menu I can open a “changes” panel, which let’s me see all the changes that I have made.
At the bottom there’s a button that I can use to copy them to the clipboard. And then I can go ahead and pretty much paste them into my code editor and implement them from there.
So basically these are things that I removed in the developer tools. So these should be removed or commented out. And then these are the new things that I added. So I got rid of some stuff and then I added some new stuff. And now I can just merge this with my CSS file basically, to make these changes permanent.
That’s it!
Thanks for watching and see you next time on oneminutevideotutorials.com!