How to enlarge the logo in header beyond the 250 px limit?

Technical Q&A
1

https://empiricalwater.com/

The logo is currently set to the max width of 250 px. I’d like to make it 500px.

Many thanks for any assistance!

1 Like
2

Hi @empiricalarby

If you can locate the code you can just change the width to 500px. Try tho find in the code in the theme.liquid or header.liquid.

Made4uoRibe_0-1708382081331.png

Or we can over ride.

by this code.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.header__heading-logo {
    max-width: 500px !important;
}

And Save.

Result:

Made4uoRibe_1-1708382218612.png
Made4uoRibe_1-1708382218612.png1320×481 43.2 KB

But i would suggest to locate the code first, so its easy for you to change the size again.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

I found the code and now it looks like this:

.header__heading-logo {
width: 100%;
height: auto;
max-width: 500px !important;
}

The logo is large now, but it looks pixelated. The logo as it appears on the website is much lower resolution than the source file. Any idea how to fix that? Thanks