Logo shows bigger for specific product categorie

[JoaquinExcitare]

Hello,

We have a problem with our logo showing bigger than normal when going to products "rings". Does anybody know how to fix this? 

Note: we only have this problem on mobille.

URL: https://excitarestudios.com/collections/rings

Thanks

[Moeed]

Hey @JoaquinExcitare 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find password.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
.header__heading-logo-wrapper img {
    width: 90px !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[JoaquinExcitare]

Unfortunately, this code does not work

[topnewyork]

Hello, @JoaquinExcitare 
1) Go to Online Store
2) Edit Code
3) Find theme.css/base.css file
4) Add the following code in the bottom

@media (max-width: 768px) {
.header__heading-logo {
    height: 23px !important; */ adjust as per your choice */
}
}

 Thanks!

[Tech_Coding]

Hello @JoaquinExcitare 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width:767px){
   .header__heading-logo-wrapper {
       width: 88% !important;
    }
}
</style>
RESULT:

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[websensepro]

Hi @JoaquinExcitare 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media(max-width:768px){
a.header__heading-link.link.link--text.focus-inset {
    width: 100px !important;
}
.section-template--24210693095749__main-padding {
    padding-top: 4px !important;
}
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

[LizHoang]

Hi @JoaquinExcitare, thanks for reaching out. 

To address the issue, please help me go to your Theme => Online store => Customize => Theme settings => Custom CSS and insert the following custom code:

@media screen and (max-width: 749px) {
    img.header__heading-logo {
        width: 90px !important;
    }
}

This is the expected result:

I hope my solution is helpful to you, and please feel free to feedback. 

Liz

[websensepro]

@JoaquinExcitare 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media(max-width:678px){
.header__heading-logo {
    width: revert-layer !important;
}
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

[DaisyVo]

Hi @JoaquinExcitare ,

You can follow the steps here:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for step 3:

@media screen and (max-width: 768px){
.header__heading-logo-wrapper img {
    width: 90px !important;
}
}

Here is the result:

Please let me know if it works!

Best,

Daisy