Re: A bigger logo

Solved

A bigger logo

WS_Materiais
Tourist
10 0 3

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/

 

Accepted Solutions (2)

namphan
Shopify Partner
1821 233 255

This is an 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;
    }
}

 

Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

View solution in original post

namphan
Shopify Partner
1821 233 255

This is an accepted solution.

Hi @WS_Materiais,

Have you tried this? 😊

Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

View solution in original post

Replies 9 (9)

PageFly-Amelia
Shopify Partner
626 165 237

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

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 
➜ Weekly updated Shopify tutorials on YouTube 


All features are available from Free plan. Live Chat Support is available 24/7.

WS_Materiais
Tourist
10 0 3

Didn't work...

namphan
Shopify Partner
1821 233 255

This is an 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;
    }
}

 

Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com
namphan
Shopify Partner
1821 233 255

This is an accepted solution.

Hi @WS_Materiais,

Have you tried this? 😊

Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com
WS_Materiais
Tourist
10 0 3

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

namphan
Shopify Partner
1821 233 255

Hi @WS_Materiais,

You're welcome and happy to help

Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

tim
Shopify Partner
3911 394 1435

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. 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
WS_Materiais
Tourist
10 0 3

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
Shopify Partner
3911 394 1435

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.

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com