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.

CSS To Adjust Sizing

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%;
}

Theme Edit to Disable Size Limits

This change will allow you to change out the logo for any size logo you create.

Have to edit the theme manually as you should only need to upload once into the field this should work fine as the next update will wipe out this change but the loaded image is always kept.

Apearance -> Theme Editor -> INC -> acf-fields.php
find (approximate) 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 (approximate) line 631 and 632 from 480 to your needed size as wide as needed.

			'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!