I’m trying to figure out how to remove the spacing around my header logo.
That’s going to require some experimentation.
For example, you can override the 24px top and bottom margin on the site-branding class and pull it closer to the left with something like this:
.site-branding {
margin-bottom: 0;
margin-left: -23px;
margin-top: 0;
}
You’ll likely may need to add additional media queries to target smaller screens like tablets and phones. You can learn more about using media queries that target certain screen sizes here:
https://en.support.wordpress.com/custom-design/custom-css-media-queries/
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
https://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
Don’t edit the theme files directly, otherwise your changes will be overwritten every time the theme is updated to the latest version.
Since you’re already using Jetpack, an easy way to add custom CSS is to activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.
Second – where can I change the fonts and colors?
You can change colours with custom CSS by targeting the specific elements you want to tweak.
Learning how to target your site’s CSS will help you make certain design and layout changes. Here are some very helpful posts that will help you customize your site with CSS:
https://dailypost.wordpress.com/2013/07/25/css-selectors/
https://dailypost.wordpress.com/2013/06/21/css-intro/
https://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/
https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/
https://thewc.co/articles/view/web-inspector-tutorial
https://cssworkshop.wordpress.com/
To change fonts, you can either use a Google fonts plugin together with custom CSS, or one of the non-plugin methods described here:
https://macmanx.com/2014/06/04/custom-fonts-without-plugins-for-wordpress-themes/
