Skip to content

Christopher James Willcock

Enjoy Kaizen

Category: Web Design

Quick Fix for Indentation Inconsistency in CSS, Using Chrome Web Browser DevTools

Does your CSS look like this?

@media only screen and (max-width: 720px) {
.planning .grid-wrapper{
  grid-template-columns: 10px 300px 10px;
    justify-content: center;
}
.planning .tuesday {
grid-column: 2;
grid-row: 1;
background-color: #eee;
    border: 5px solid #555;
padding: 70px;

}

Did you notice the media query is still open here? This can lead directly to the swamp of desperation, is time-consuming and ever more disheartening as the number of lines adds up and the mental effort to unwind it becomes greater and greater. More CSS, more problems.

Not to worry! There is a super-simple way to fix this up quickly.

  1. Pre-requisite: using Chrome web browser
  2. Right click anywhere on your website.
  3. Choose ‘inspect’ from the context menu.
  4. In DevTools, select the Sources tab.
  5. On the navigation pane, browse to your CSS source file and click to select.
  6. In the reading pane in the center, look for an icon: {} in the bottom left, just under the line numbers. Click it.

Boom! Your CSS source code has been auto-formatted with proper indentation.

  1. Select all the text of the shiny CSS here in the reading pane (Windows users: CTRL+A).
  2. Copy and paste this into your CSS source file.

With this little process, you can hopefully reduce the number of occasions that CSS causes you grief and stay on top of it!

Gallery Test

Pancakes!

Time to make a new theme for cjwillcock.ca.

I forked my Psymantic theme and made a new theme, Pancakes. I’ll install it here, then make it less ugly. It’s going to break things, but not for long I expect.

Pancakes is also free software, because software wants to be free! Enjoy.

Lastly, a screenshot of what once was, for posterity. Shout out and kudos to David Shanske, the provider of the twentysixteen-indieweb theme I have used until now.