A bigger logo

[WS_Materiais]

I searched the forum for similar questions but no solution worked for my site...
I want to increase the size of my logo JUST for the computer, how do I do it?

The URL: https://wsmateriais.com/

[namphan · Accepted solution]

Hi @WS_Materiais,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

@media screen and (min-width: 641px) {
    .header__logo-image {
        max-width: 180px !important;
    }
}

[PageFly-Amelia]

Hi @WS_Materiais ,

This is Amelia from PageFly - a Landing Page Builder App,

You can use CSS media queries to target larger screens. Here are the steps to achieve this:

1. Access Your Shopify Admin:

   • Go to your Shopify admin panel.
   • Navigate to Online Store > Themes.
   • Click on Actions > Edit code for your current theme (Dawn).

2. Locate the CSS File:

   • In the left sidebar, find and open the base.css file located in the Assets folder.

3. Add CSS for Desktop Logo Size:

   • Add the following CSS code to increase the logo size for desktop screens:

   /* Default logo size */
   .header__heading-logo img {
       max-width: 100px; /* Adjust this value as needed */
   }
   
   /* Increase logo size for desktop */
   @media (min-width: 768px) {
       .header__heading-logo img {
           max-width: 200px; /* Adjust this value as needed */
       }
   }

   This code sets a default logo size and then increases it for screens wider than 768px (typically desktop screens).

4. Save Your Changes:

   • After adding the CSS code, save the changes.

5. Preview Your Store:

   • Preview your store to ensure the logo size has been adjusted correctly on desktop views.

I hope that my solution works for you.

Best regards,

Amelia | PageFly

[WS_Materiais]

Didn't work...

[namphan · Accepted solution]

Hi @WS_Materiais,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

@media screen and (min-width: 641px) {
    .header__logo-image {
        max-width: 180px !important;
    }
}

[namphan · Accepted solution]

Hi @WS_Materiais,

Have you tried this? 😊

[WS_Materiais]

I put this code in the custom CSS that Tim recommended to me and it worked! Thanks.

[namphan]

Hi @WS_Materiais,

You're welcome and happy to help

[tim]

On top of what others suggested my only recommendation is to not edit the theme code, but rather (or at least first try to) paste the code to "Custom CSS" setting of your Heading section.

Avoiding theme code edits simplifys future theme updates. 

[WS_Materiais]

I tried editing through the custom CSS that appears when I click on the header while customizing Shopfy itself, but all the codes I tried to do on my own didn't work correctly...
The only thing I was able to edit in a better way was using "scale", but because of that I was unable to save the changes due to some error.

[tim]

Can't test myself because your theme is neither free nor from Shopify theme store.

Yes, sometimes this may not work because, say a part of the header is not part of the header section 🙂 but this does not see to be the case this time.

You can also try "Custom CSS" under "Theme settings" -- these rules are not scoped to any particular section and apply to entire site.

And yes, very rarely you may be forced to actually edit theme code for your CSS.