Have you ever wondered how to increase the size of your header logo? Want to make your logo shine? You’re in luck, my friend! This is for you, friend!
Obligatory Disclaimer: Please save a copy before making any changes to your CSS file.
This tutorial will use the new Beautiful WordPress Theme, but it can be adapted to any of our themes. There are a lot of factors to consider when designing a WordPress theme. Google now considers mobile responsiveness when determining search results, so each piece must be fully mobile-responsive.
Does your website have a mobile-friendly design? In case you’re not sure, I wrote an article a few years ago that may be useful.
To ensure responsiveness on mobile devices, I created a standard image size that would look great in any resolution and across all devices. You can easily adjust your CSS space to accommodate larger images because the image size you defined is of high resolution. Let’s get started.
How to make your header logo bigger
Change the maximum width to your desired size. You’re using the default image size of 1200px x 400px. Make sure that the height and width are the same.
If you increase the maximum width from 300px up to 500px, then your new height will be 167px. A logo that is 700px wide would need a height of about 233px.
You can easily calculate the size of the header logo by opening the template that comes with the Beautiful WordPress Theme and selecting “image size” in the top menu. You can adjust the height and width by simply changing the width.
After you’ve set your header image to the desired size, scroll down your CSS files until you find the Media Queries section. Look for the 600px query as shown below.
{@media only screen and (max-width: 600px) @media only screen (max width: 600px).
Add the below that top line.
The final product should look something like this
{@media only screen and (max-width: 600px) @media only screen (max-width 600px).header image.site title> a height: 100px, width: 300px,
You’re now ready to use on mobile and desktop. You could be more specific and create different widths and heights for various screen sizes, starting at 600px. But 300px will work for everyone.
You might also enjoy our TADA membership. Check out how we teach you to DIY your website at Learn.PrettyDarnCute.com.
