Fixing the CSS on a WordPress website can be tricky. Especially given that each theme and (if I'm not wrong) plugin can add their own.

I started fixing CSS on WordPress websites with my dad's online store. I started with just googling how to do this and that and eventually came up with my own pattern for fixing CSS.

To show you how I do it. I'll find something I don't like about the css of my current website and fix it. For example... Do you see how the website title is off center at the top? That's ugly.

Let's fix that.

The inspector tool

First thing I do is open up the inspect tool of the browser. If you don't know about it, it's a tool used by front-end web developers to mess around with a website on the client side. It's very useful and has some really cool features. You can press F12 on your keyboard or right click anywhere on the page and select inspect in the menu.

Next I click on this little icon:

It should be in the top left corner of the inspection window that you just opened up.

This will allow you to hover over any part of the webpage and the inspect tool will automatically focus on the html code that is responsible for that part. To keep the inspect tool focused on the desired part, you need to click on the part while hovering over it. This will essentially exit that highlighting mode on the webpage, and instead highlight the html responsible for the part in the inspect tool.

Finding the right element

According to our inspect window, we will want to modify the css for the "a" html element.

Or, maybe not quite. When adjusting the alignment of an element we usually want to tell its parent element to align it instead.

To modify it, we'll want to use the "additional css" section of our theme customization window:

Experiment!

So let's try doing something to... the div with the "site-branding" id. I know, that's not the direct parent of the "a" element. But the other two are really just wrappers of the title, so we don't need to mess around with them. Instead we want to find usually a div that contains multiple elements on the webpage. In this case the div with the "site-branding" id has both the icon and the title in it. Let's see if aligning the elements of the site-branding div with a flex display will help us.

div#site-branding {
	display: flex;
	flex-direction: row;
	align-items: center;
}

That works, but now it feels like they're a tad close to each other. Let's add a left margin of 10 pixels to the outer most wrapper of the title.

div#site-detail {
	margin-left: 10px;
}

Now the preview of the whole menu skewed to the right a bit. Let's correct that with a right margin of -10 pixels. That will essentially attract everything on the right to the title by 10 pixels.

And that I think is perfect. 🙂

Conclusion

In short:

• Find the right element with the inspector tool
• Open the "additional css" tab/section of the theme customization panel
• Make sure you're modifying the right element (the one on which changes will be visible)
• Start experimenting! (you can always google something, or in my case use duckduckgo)

P.S. Something I used to do a lot, and still do from time to time is choosing the wrong element. You can clearly see you chose the wrong one when obvious changes like color are not visible. Choosing the right element is often tricky with WordPress because a lot of the content on the website is often in wrapper elements like our title, and choosing the right one can be challenging at first.

I hope this helps. Check out some of my other posts, and I'll see you later. 🙂