Acabado: Change Your Logo Width and Height

When you look to make changes to the logo you are restricted to the size and width within the code in the theme files. Well, when you want to look into a larger logo you have two methods, either edit the file itself or by code snippets.

New Code Snippets Method

Instead, you can now install the Code Snippets plugin and import the code snippet below which will allow you to change the logo size. Once you replace the logo stop the snippet.

Code Snippet (Right Click and Save As)

This when running will overwrite the logo sizes allowing you to upload the image you choose into the theme.

You will then need to paste in the Custom CSS below to help give a base to change the size of the logo when you have smaller screen sizes. You will have to adjust this depending on your image size. The below code will make the width no more than 50% of the width of the site.

.site-branding img {
    height: auto;
    width: auto;
    max-width: 50%;
}

Old Method

Have to edit the theme manually which isnt for the faint of heart

Apearance -> Theme Editor -> INC -> acf-fields.php
find line 628 and 629
change them to match below

			'min_width' => 0,
			'min_height' => 0,

Now you can set anything up to 480×480

To make it wider change line 631 and 632 from 480 to your needed size

			'max_width' => 480,
			'max_height' => 480,

Then you need to change and add the following Custom CSS to drive the actual sizing. You need to change the height and width to your image pixel size.

.site-branding img {
    height: 240px;
    width: 480px;
    max-width: 100%;
}

I love technology, I have plenty of technical side experience but never really thought of blogging as a way to earn an income. With everything that has gone on in the last couple years and the instability of the job markets I started to learn how to blog and build affiliate niche sites to add more income channels to give me the chance to break free from the financial chains that bind me and find real freedom!